React，由 Facebook 创建，是一个用于构建用户界面的开源 JavaScript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 HTML 与 JavaScript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。我们的应用程序可能在 state 和渲染的 UI 之间有更复杂的交互。例如，用于文本输入的表单控件元素（如 input 和 textarea ）在用户键入时在 DOM 中维护自己的 state。通过 React，我们可以将这种可变 state 转移到 React 组件的 state 中。用户的输入变成了应用程序 state 的一部分，因此 React 控制该输入字段的值。通常，如果你的 React 组件具有用户可以键入的输入字段，那么它将是一个受控的输入表单。代码编辑器具有一个名为 ControlledInput 的组件框架，用于创建受控的 input元 素。组件的 state 已经被包含空字符串的 input 属性初始化。此值表示用户在 input 字段中键入的文本。首先，创建一个名为 handleChange() 的方法，该方法具有一个名为 event 的参数。方法被调用时，它接收一个 event 对象，该对象包含一个来自 input元 素的字符串文本。我们可以使用方法内的 event.target.value来 访问这个字符串。用这个新字符串更新组件的 state 的 input 属性。在 render 方法中，在 h4 标签之上创建 input 元素。添加一个 value 属性，它等于组件的 state 的 input 属性。然后将 onChange() 事件处理程序设置到 handleChange() 方法。在输入框中键入时，该文本由 handleChange() 方法处理，该文本被设置为本地 state 中的 input 属性，并渲染在页面上的 input 框中。组件 state 是输入数据的唯一真实来源。最后也是最重要的，不要忘记在构造函数中添加必要的绑定。class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
this.setState({
input: event.target.value
})
}
render() {
return (
<div>
<input value={this.state.input} onChange={this.handleChange} />
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。
