哪个事件用于从输入发出变化？

Question

我有一个包含许多 <TextInput> 组件的 React 组件，它们只是文本 <input> 元素的简单包装器。示例：

<div>
    <TextInput value={person.FirstName} ... />
    <TextInput value={person.LastName} ... />
</div>

我还有一些由人对象表示的状态。例如：

{ 
    "FirstName": "Buster", 
    "LastName": "Posey" 
}

每个 <TextInput> 组件管理它自己的内部状态，即文本 <input> 在给定时间的值。

当我单击“保存”按钮时，我想确保人物对象具有来自所有 <TextInput> 个组件的最新值。

我可以想到两种方法：

事件（onKeyDown、onChange、onBlur）。 <TextInput> 中的事件将创建一个动作，它通过调度程序，并且商店一次更新一个字段的人员对象。
参考资料。我知道这是一种反模式，但它确实看起来简单得多。我可以在单击“保存”时迭代引用并拉出状态并触发操作。

执行此操作的惯用方法是什么？

Answer 1

如果它只是一个简单的输入包装器，请给它与输入相同的 api，不要让它管理它不需要的内部状态。

render(){
    var person = this.state.person;
    return <div>
        <TextInput value={person.FirstName} onChange={this.handleFirstNameChange} />
        ...
    </div>
},
handleFirstNameChange(name){
    this.setState({person: update(this.state.person, {
        FirstName: {$set: name}
    }});
}

^{^{更新为React.addons.update，举个例子}}

点击保存后，您会在操作中将其发送出去。如果确实需要，您可以为每条临时数据存储一个存储区，但如果您不持久化它几乎总是过大。

哪个事件用于从输入发出变化？

Which event to use for emitting change from inputs?

javascript

reactjs

reactjs-flux