用的onClick呼叫處理功能和反應

我試圖做同樣的事情https://codepen.io/gaearon/pen/VmmPgp?editors=1010。所以我有一個表格，我想與參數（第一里面輸入參數）重定向。用的onClick呼叫處理功能和反應

我的代碼是：

var React = require('react'); 
var ReactDOMServer = require('react-dom/server'); 

class Views_Delete_Delete extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {value: ''}; 

     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
     event.preventDefault(); 
     this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 
     alert('Valeur : '); 

    } 

    render() { 
     var data = this.props.data; 

     return (
      <div className="delete"> 
       <label> 
        Supprimer les données dun bon de travail : 
        <input className="input_id_traitement" type="text" value={data.id_traitement} onChange={this.handleChange}/> 
       </label> 
       <input className="btn_delete_traitement" type="submit" value="Delete" onClick="{this.handleSubmit}" /> 
      </div> 
     ); 
    } 
} 

module.exports = Views_Delete_Delete;

我沒有任何錯誤，但是當我點擊我的按鈕，重新加載頁面。我也反應過來，路由器試圖以使用<Link>但它也不起作用。

來源

2017-03-07 Erlaunis

採用按鈕式「提交」，它會嘗試提交表單，和它的默認行爲是瀏覽器形成的action。

簡單的辦法就是從改變按鈕式「提交」，「按鈕」：

<input className="btn_delete_traitement" type="button" value="Delete" onClick="console.log('test');" />

事件更好：不上的按鈕使用onClick。相反，處理表單onSubmit事件（與按鈕式「提交」）。

來源

2017-03-07 12:00:19 dfsq

我試了兩種，但它不起作用：/ – Erlaunis

但我不明白的一個奇怪的事情是，當我檢查我的頁面中的元素，沒有onclick屬性 – Erlaunis

@Erlaunis不會有屬性， onClick將使用addEventListener創建事件處理程序。「Views_Delete_Delete」是表單的一部分嗎？ – dfsq

用的onClick呼叫處理功能和反應

回答

相關問題