React - 在表单提交时获取 POST 参数

Question

我正在使用 React，并希望从表单中检索 POST 参数（见下文）：

<form ref='form' className="form">
    <input type="text" className="signup-input" />
    <input type="text" className="signup-input" />
    <button className="btn btn-primary" onClick={this._onSubmitClick}>Submit</button>
</form>

在 _onSubmitClick 回调中，我想获得与调用 $(".form").serialize() 相同的结果，但不使用 JQuery.

Answer 1

var elements = this.refs.form.getDOMNode().elements;

为您提供一个包含每个 input 节点的对象，然后您可以对其进行迭代。

Answer 2

您可以在每个 input:

上放置 ref

<form ref='form' className="form">
    <input type="text" ref="firstName" className="signup-input" />
    <input type="text" ref="lastName" className="signup-input" />
    <button className="btn btn-primary" onClick={this._onSubmitClick}>Submit</button>
</form>

然后使用 React.findDOMNode 在 _onSubmitClick 中访问它们：

_onSubmitClick: function() {
    var firstName = React.findDOMNode(this.refs.firstName).getValue();
    var lastName = React.findDOMNode(this.refs.lastName).getValue();
    // ...
}

Answer 3

除了答案，我认为有人会喜欢这个 ;)

export default class LoginView extends React.Component {
    handleSubmit(evt) {
        const formData = Array.from(evt.target.elements)
            .filter(el => el.name)
            .reduce((a, b) => ({...a, [b.name]: b.value}), {});
        console.log(formData);
        evt.preventDefault();
        return false;
    }

    render() {
        return (<form onSubmit={this.handleSubmit}>...</form>)
    }
}

React - 在表单提交时获取 POST 参数

React - on form submit get POST params

javascript

reactjs