34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
|
---
|
|||
|
title: Create a Controlled Form
|
|||
|
localeTitle: 创建受控表格
|
|||
|
---
|
|||
|
## 创建受控表格
|
|||
|
|
|||
|
创建受控表单与创建受控输入的过程相同,除非您需要处理提交事件。
|
|||
|
|
|||
|
首先,创建一个受控输入,将其值存储在状态中,以便存在单一的事实来源。 (这是您在上一次挑战中所做的。)创建一个输入元素,将其value属性设置为位于state中的输入变量。请记住, `this.state`可以访问状态。接下来,设置input元素的`onChange`属性以调用函数'handleChange'。
|
|||
|
|
|||
|
### 解
|
|||
|
|
|||
|
```react.js
|
|||
|
<input value={this.state.input} onChange={this.handleChange}/>
|
|||
|
```
|
|||
|
|
|||
|
接下来,为组件创建handleSubmit方法。首先,因为您的表单正在提交,您必须阻止页面刷新。其次,调用`setState()`方法,传入要更改的不同键值对的对象。在这种情况下,您希望将“submit”设置为变量“input”的值,并将“input”设置为空字符串。
|
|||
|
|
|||
|
```react.js
|
|||
|
handleSubmit(event) {
|
|||
|
event.preventDefault();
|
|||
|
this.setState({
|
|||
|
input: '',
|
|||
|
submit: this.state.input
|
|||
|
});
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
现在您的数据正在处理状态,我们可以使用这些数据。创建一个`h1`元素。你的`h1`元素里面放了你的'submit'变量。请记住,'submit'位于州内,因此您需要使用`this.state` 。此外,将变量放在JSX中需要花括号`{ }`因为它是JavaScript。
|
|||
|
|
|||
|
```jsx
|
|||
|
<h1>{this.state.submit}</h1>
|
|||
|
|
|||
|
```
|