Question

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

我的代码是：

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;

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

Answer 1

使用按钮类型＆＃34;提交＆＃34;，它会尝试提交表单，默认行为是浏览浏览器以形成action。

最简单的解决方案是从＆＃34;提交＆＃34;更改按钮类型到＆＃34;按钮＆＃34;：

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

事件更好：不要在按钮上使用onClick。而是处理表单onSubmit事件（使用按钮类型＆＃34;提交＆＃34;）。

使用onClick调用句柄函数并做出反应

1 个答案: