Javascript 使用onClick和react调用句柄函数

我试着做和你一样的事。所以我有一个表单，我想用参数重定向（第一个输入中的参数）

我的代码是：

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;

var React=require（'React'）；
var ReactDOMServer=require（'react-dom/server'）；
类视图\u Delete\u Delete.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
event.preventDefault（）；
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
警报（'Valeur:'）；
}
render（）{
var数据=this.props.data；
返回(
供应人les données dun bon de travail：
);
}
}
module.exports=视图\删除\删除；

我没有任何错误，但是当我点击我的按钮时，页面被重新加载。我还尝试使用react router以使用

，但它也不起作用。

使用按钮类型“提交”，它尝试提交表单，默认行为是将浏览器导航到表单的

操作

最简单的解决方案是将按钮类型从“提交”更改为“按钮”：



事件更好：不要使用按钮上的
onClick
。相反，处理表单
onSubmit
事件（按钮类型为“submit”）。
但我不明白的是，当我检查页面中的元素时，没有onclickattribute@Erlaunis没有属性，onClick将使用addEventListener创建事件处理程序。
Views\u Delete\u Delete
是表单的一部分吗？对不起，我不明白，当我从路由器呼叫表单时，类
Views\u Delete\u Delete
返回表单。因此，当我转到
/delete
时，它会显示带有此表单的页面。
<input className="btn_delete_traitement" type="button" value="Delete" onClick="console.log('test');" />