以前我用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).这意味着我不仅要为每个输入编写一个处理程序,并在渲染时将该回调添加到每个输入,但我还必须将我的数据对象传递给每个输入！
>使用refs：
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专家能够解释我所缺少的东西,我将非常感激.
接下来,裁判有灵活性问题.有关详细信息,请参见此answer.除了最简单的情况之外,让我们的规则适用于所有人.
这留下了选项#2 – Facebook称之为controlled components.受控组件非常棒,因为它们涵盖了所有用例(如密钥上的验证).虽然代码不多,但如果您不想为每个表单元素添加简单的更改处理程序,则可以使用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.
