Javascript 反应-在表单上提交获取POST参数

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

提交

在submitclick上的

\u回调中，我希望获得与调用
$（“.form”）.serialize（）相同的结果，但不使用JQuery

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

为您提供一个包含每个
输入
节点的对象，然后您可以对其进行迭代。
您可以在每个
输入上放置
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>

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

导出默认类LoginView扩展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（）；
返回false；
}
render（）{
返回（…）
}
}
您是否尝试查看jQuery源代码以了解它在幕后的作用？
getDomNode
已被弃用。改为这样做：
从'react dom'导入{findDOMNode}；var elements=findDOMNode（this.refs.form）.elements查看
FormData
，。npm模块值得一看。我在一个项目中使用过，它对我来说很好。如果我的输入元素在子组件中，我将如何做到这一点？
<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>

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

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