React.js 中的 Controlled Input

最近的工作中我大量的使用了 React.js。它是一个用于用户界面开发的库。而且我发现 React.js 背后的概念使得开发用户界面变得非常简单。但是它还是有少许的缺陷。我觉得尤其坑的是 controlled input ，我被这货搞得很无语。

比如看看下面的代码。

1
2
3

render: function() {
  return ( <input type="text" value="Hello" /> )
}

你可能会觉得如果在那个 input 里面输入字符会改变它的值。然而事实并非如此。React.js 只允许数据单向流动，视图是不能直接更新组件的状态的。那么，我们要怎样才能改变那个 input 的值呢？

getInitialState: function() {
  return {
    value: "Hello"
  }
},
handleChange: function(event) {
  this.setState({
    value: event.target.value
  });
},
render: function() {
  return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> )
}

现在组件里设置了一个初始状态 value, 初始值为字符串 Hello。当这个状态改变时，input 的值也跟着改变。

到此为止，这个能用的 input 还只实现了一半。

接下来的函数 handleChange 绑定到 input 的 onChange 事件上。handleChange 使用 input 中输入的值来更新组件的状态。状态更新后的组件使用新的值重新渲染。

这种实现方式看起来好像有点奇葩有点随意，但是对简单的 UI 编程来说还算可用。