我正在尝试在 React 中做一些在任何其他框架中都非常简单的事情:我想从表单中收集一堆值。
以前我用 Backbone View 做过这种事情，而且非常简单:
readFormValues: function() {
this.data.foo = this.$('[name="foo"]').val();
this.data.bar = this.$('[name="bar"]:checked').val();
});
但在 React 中我似乎找不到一种简单的方法来做到这一点。看来我唯一的选择是......
注意:对格式表示歉意:代码块和列表不能很好地结合在一起:-(
完全绕过 React 并使用 jQuery +
e.target访问表格:handleSubmit: function(e) {var $form = $(e.target).parents('form:first');this.data.foo = $form.find('[name="foo"]);},render: function() {return <form onSubmit="handleSubmit"><input name="foo"/></form>;}这很有效，而且很简单，但感觉就像我在应该只使用 React 时绕过了 React 并使用了 JQuery。
为每个表单控件提供回调:
handleFooClick: function(e) {this.data.foo = event.target.value;},render: function() {return <form><input name="foo" onChange="handleFooChange"/></form>;}这似乎是 React/Flux 的方式，但感觉像是大量不必要的工作。在我的 Backbone 示例中，每个表单控件只需要一行，但通过这种方法，我构建的每个最后一个控件都必须有自己的 onChange 处理程序(并且我必须在渲染时将该处理程序挂接到每个元素)。
编辑:这种方法的另一个缺点是回调
this.props内部和this.state不会指向我的表单控件的 props/state(它将指向输入的 props/state)。这意味着我不仅必须为每个输入编写一个处理程序，并在渲染时将该回调添加到每个输入，而且还必须将我的数据对象传递给每个输入!使用引用:
handleSubmit: function(e) {this.state.data.foo = this.refs.foo.value;},render: function() {return <form><input ref="foo"/></form>;}这似乎是一个更明智的解决方案，因为我只需要向每个表单控件添加一个“ref”属性，然后我就可以像在 Backbone 中一样轻松地读取数据。然而，所有 React 文档都表明，以这种方式使用 refs 是错误的(所有使用 refs 的示例都涉及向控件发送信号，例如“关注此输入”，而不是从控件中读取数据)。
我觉得必须有一种“React-ive”方式来访问我的表单数据，这种方式并不是不必要的复杂，但我没有看到它，因为我对 React 的理解不够好。如果任何 React 专家能够解释我所缺少的内容，我将不胜感激。
请您参考如下方法:
首先，jQuery 是一个不必要的依赖项，而且它不是最干净的选项，所以让我们排除它。
接下来，裁判的灵 active 存在问题。看这个answer了解详情。让我们排除除最简单情况之外的所有引用。
剩下选项 #2 - Facebook 称之为 controlled components 。受控组件很棒，因为它们涵盖了所有用例(例如 keyup 验证)。虽然代码不多，但如果您不想为每个表单元素添加一个简单的更改处理程序，则可以通过使用 bind 对所有元素使用一个更改处理程序。像这样的事情:
handleChange: function(fieldName, e) {
console.log("field name", fieldName);
console.log("field value", e.target.value);
// Set state or use external state.
},
render: function() {
var someValue = this.state.someValue; // Or a prop is using external state
return (
<div>
<input
name="someName"
value={someValue}
onChange={this.handleChange.bind(this, "someName")} />
</div>
)
}
或者想要更简洁的方式，请参阅此 answer .
