根据上一篇文章，我们可以了解到在React中如何处理鼠标点击表单的按钮。现在我们将会讲述表单中更普遍的东西：文本输入。
我们继续使用之前的sign-up-app，将其改造成允许用户记录注册用户的用户名列表。当用户在输入框中输入用户名后，单击提交按钮，页面会自动保存该注册名到姓名列表中并显示：
sign-up-app.jpeg
通过refs获取用户输入
当用户点击提交按钮后，我们想要读取用户在输入框中输入的内容。一个通常的方法是：当用户点击提交按钮后，我们找到该输入框的DOM元素，然后在这个DOM元素中获取数据。
现在先让我们新建一个组件BasicInput，里面包含了基本的表单结构：输入框，提交按钮。
BasicInput.js：
render() {
return (
<div>
<h1>注册表</h1>
<form onSubmit={this.onFormSubmit}>
<input
type="text"
placeholder="用户名"
ref="name"/>
<input type="submit" value="提交"/>
</form>
</div>
)
}
这个例子和简单，里面包好了一个form元素，该元素下有两个子元素，分别是input的输入框和一个submit的提交按钮。
这里有两个地方值得注意。
其一：我们给form元素添加了一个onSubmit的event handler。
其二：我们给input输入框添加个ref属性，其值为name。
为什么要在form上面使用onSubmit，而不是在提交按钮上使用onClick呢？原因是当时用了onSubmit，用户不仅可以点击提交按钮对文本进行提交，也可以在表单的范围内直接按回车(enter/ return)来提交文本。这比仅仅点击提交来说显得更加用户友好。
但是，由于我们的event handler是绑定在form上的，这样，它的event对象相较于上一篇文章的例子中显得不那么有用了。在上一篇文章的例子中，我们可以使用event.target来获取元素目标(button)，及其值。而在这个例子中，我们关心的是input输入框的值。在这里，如果通过form的event对象，那么要用event.target指向表单，然后在从其子元素中找到input，然后再获取输入值。显然这比较麻烦。现在有一个更简单的方式来获取input的值。
在React中，如果想要获取组件中的DOM元素，我们可以使用refs(references)。从代码中我们可以看到，我们给input设置了一个ref="name"，然后在onSubmit通过this.refs.name来获取input元素。这样就可以直接获取值了：
onFormSubmit = (e) => {
e.preventDefault()
console.log(this.refs.name.value)
}
这里的e.preventDefault()和原生DOM一样是为了阻止默认事件。
通过 this.refs.name我们就可以获得input输入框的数据了：
output.jpeg
使用用户输入
现在我们可以获取用户输入的用户名了。现在我们要用使用这些信息来改变应用的state和UI。
这个例子的目标是当用户输入注册名并提交后，显示在页面的注册名列表中。我们要用一个存放用户名的数组给state，然后由render()将其渲染出来。
当应用初次加载的时候，这个用户名数组是空的。每当用户提交一个名字，则将这个名字存入数组中。现在让我们按需求来改造一下组件：
export default class BasicInput extends Component {
constructor(props) {
super(props);
this.state = {
names: []
};
}
onFormSubmit = (e) => {
e.preventDefault()
const name = this.refs.name.value
const names = [...this.state.names, name]
this.setState({
names: names
});
this.refs.name.value = ''
}
render() {
return (
<div>
<h1>注册表</h1>
<form onSubmit={this.onFormSubmit}>
<input
type="text"
placeholder="用户名"
ref="name"/>
<input type="submit" value="提交"/>
</form>
<div>
<h3>名字</h3>
<ul>
{
this.state.names.map((name, index) => {
return <li key={index.toString()}>{name}</li>
})
}
</ul>
</div>
</div>
)
}
}
其实只要看过前面的几篇文章，这段代码是不难理解的。
对于onFormSubmit的思路步骤如下：
- 新建一个变量来存储拷贝后的当前
state的names(immutable) - 在数组中添加新的用户名
- 使用
this.setState()来更新状态并重新渲染 - 清除用户输入的数据，体现更好的用户友好性。
受控组件和非受控组件uncontrolled components, controlled components
之前的例子，我们使用了refs来直接获取DOM元素，并执行相关的操作。这是一个办法，但是这样也让我们体会不到使用React的好处了。
使用React，我们可以不必修改DOM去匹配应用的状态。我们应该把注意力放在改变state，然后通过state的变化导致UI的变化。而且通过修改state的方式，使得渲染的变化变得更加可预测。
之前例子的方式(使用refs)被称之为“非受控组件”(uncontrolled component)。意思就是React不会“控制”(control)组件是如何渲染的。
如果让React来控制组件，就称之为受控组件controlled component。
将非受控组件转化成受控组件的步骤：
- 使用
state存储value - 在一个地方使用
value prop，其值为state中的value - 添加
onChange来更新state
代码如下：
export default class BasicInput extends Component {
constructor(props) {
super(props);
this.state = {
names: [],
name: ''
};
}
onNameChange = (e) => {
this.setState({
name: e.target.value
});
}
onFormSubmit = (e) => {
e.preventDefault()
const name = this.state.name
const names = [...this.state.names, name]
this.setState({
names: names
});
this.state.name = ''
}
render() {
return (
<div>
<h1>注册表</h1>
<form onSubmit={this.onFormSubmit}>
<input
type="text"
placeholder="用户名"
value={this.state.name}
onChange={this.onNameChange}/>
<input type="submit" value="提交"/>
</form>
<div>
<h3>名字</h3>
<ul>
{
this.state.names.map((name, index) => {
return <li key={index.toString()}>{name}</li>
})
}
</ul>
</div>
</div>
)
}
}
这样就修改完成了，运行结果和之前一致。
网友评论