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

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

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>)
    }
}

Answer 3

您可以在每个ref上放置input：

<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();
    // ...
}

React - on form submit get POST params

3 个答案: