表单
在React里，HTML表单元素的工作方式和其他的DOM的元素有些不用，这是因为表单元素通常会保持一些内部的state，例如这个纯html表单直接收一个名称：
<form>
<label>
名称：
<input type="text" name="name"/>
</label>
<input type="submit" value="提交" />
</form>
此表单具有默认的HTML表单行为，即在用户提交表单后浏览到新页面。
如果你在React中执行相同的代码，他依然有效，但是大多数情况下，使用JavaScript函数可以很方便的处理表单的提交，同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用"受控组件"。
受控组件
在HTML中，表单元素（如,和）之类的表单元素通常自己维护state，并根据用户输入进行更新。而在React中，可变状态通常保存在组件的state中，并且只能通过setState来更新。
我们可以吧两者结合起来，使React的state成为唯一数据源。渲染表单的React组件还控制着用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素叫做“受控组件”。
假如，如果我们想让前一个实例在提交时候打印出名称，我么可以将表单写成受控组件：
class NameForm extends React.Component {
constructor(props) {
super(props)
this.state = {
value: props.value ? props.value : ""
}
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
alert('提交的名字: ' + this.state.value);
event.preventDefault();
}
render(){
return (
<form onSubmit = { this.handleSubmit}>
<div>{this.state.value}</div>
<label>
名字：
<input type="text" value={this.state.value} onChange = { this.handleChange } />
</label>
<input type="submit" value="提交" />
</form>
)
}
}
ReactDOM.render(<NameForm/>,document.querySelector('#root'))
由于在表单元素上设置了value属性，因此显示的值将始终为this.state.value,这使得React的state成为唯一数据源。由于handleChange在每次按键时都会执行并更新React的state，因此显示的值将随着用户输入而更新。
对于受控组件来说，输入的值始终由React的state驱动。你也可以将value传递给其他UI元素，或者通过其他时间处理函数重置，但是意味着你需要编写更多的代码。
textarea 标签
在HTML中，<textarea>元素通过其子元素定义其文本：
<textarea>
你好， 这是在 text area 里的文本
</textarea>
而在React中，使用value属性代替。这样，可以使得使用<textarea>的表单和使用单行的input的表单非常类似：
class TextareaControl extends React.Component {
constructor(props) {
super(props)
this.state = {
value: props.value ? props.value : ""
}
}
handleSubmit = () => {
alert(this.state.value)
}
handleChange = (ev) => {
this.setState({
value: ev.target.value
})
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<div>{this.state.value}</div>
<label>
名字：
<textarea type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="提交" />
</form>
)
}
}
ReactDOM.render(<TextareaControl />, document.querySelector('#root'))
select标签
在HTML中，<select>创建下拉列表标签。例如，如下HTML创建了水果相关的下拉列表：
<select>
<option value="grapefruit">葡萄柚</option>
<option value="lime">酸橙</option>
<option selected value="coconut">椰子</option>
<option value="mango">芒果</option>
</select>
请注意，由于selected属性的缘故，椰子选项默认被选中。React并不会使用selected属性，而是在根select`标签上使用value属性，这在受控组件中更便捷，因为你只需要在根标签中更新他。
class SelectControl extends TextareaControl {
constructor(props) {
super(props)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<label>
选择你喜欢的风味:{this.state.value}
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">葡萄柚</option>
<option value="lime">酸橙</option>
<option value="coconut">椰子</option>
<option value="mango">芒果</option>
</select>
</label>
<input type="submit" value="提交" />
</form>
);
}
}
ReactDOM.render(<SelectControl />, document.querySelector('#root'))
总的来说，这使得 , 和 之类的标签都非常相似—它们都接受一个 value 属性，你可以使用它来实现受控组件
文件input标签
在HTML中，<input type="file">允许用户从储存设备中选择一个或多个文件，将其上传到服务器，或者通过使用JavaScript的File API进行控制。
<input type="file">
因为它的value是只读，所以它是React中的一个非受控组件。
处理多个输入
当需要处理多个input元素时，我们可以给元素添加name属性，并让处理函数根据event.target.name的值选择要执行的操作。
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
}
}
handleInputChange = (ev) => {
const target = ev.target;
const value = target.name === 'isGoing' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
})
}
render () {
return (
<form>
{JSON.stringify(this.state)}
<label>
参与:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
来宾人数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
)
}
}
ReactDOM.render( <Reservation />,document.querySelector("#root"))
这里使用了 ES6 计算属性名称的语法更新给定输入名称对应的 state 值：
等同于ES5的
var partialState = {};
partialState[name]=value;
this.setState(partialState)
另外由于setState自动将部分的state合并到当前state，只需要调用它更改部分的state即可。
受控输入空值
在受控组件上指定value的prop会阻止用户更改输入。如果你执行了value，单输入仍可编辑，则可能是你意外地将value设置成了undefined或null。
ReactDOM.render( <input value="hi" onChange={()=>{}}/>,document.querySelector("#root"))
setTimeout(function() {
ReactDOM.render(<input value={null} onChange={()=>{}} />, document.querySelector("#root"));
}, 1000);
受控组件的代替品
有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式编写时间处理函数，并通过一个React组件传递所有的输入state。当你将之前的代码库转化为React或将React应用程序与非React库集成的时，这可能令人厌烦。在这种情况下，你可能希望使用非受控组件。
本文地址：https://blog.csdn.net/qq_41914181/article/details/111146540