用onClick调用句柄函数并作出反应

我正在尝试做同样的事情https://codepen.io/gaearon/pen/VmmPgp?editors=1010 。 所以我有一个表单，我想用参数（第一个input内的参数）redirect。

我的代码是：

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; 

我没有任何错误，但是当我点击我的button，页面被重新加载。 我也试过用react-router来使用<Link>但是它也不起作用。

Answer 1

使用buttontypes“提交”，它会尝试提交表单，默认行为是浏览器导航到表单的action 。

最简单的解决scheme是将buttontypes从“提交”更改为“button”：

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

事件更好：不要使用onClickbutton。 相反，处理表单onSubmit事件（与buttontypes“提交”）。