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

Question

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

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

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

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

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

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

我可以想到两种方法来做到这一点：

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

这样做的惯用方式是什么？

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

^{update就是React.addons.update，只是举例}

当点击保存时，你会在一个动作中发送它。如果你真的需要，你可以为每条临时数据存储一个存储，但如果你不持久化它几乎总是矫枉过正。