React学习之——受控组件(个人条记)

计算机软件开发 · 2024-9-23 02:00:31

官方文档：https://react.docschina.org/docs/forms.html

在 HTML 中，表单位素（如<input>、 <textarea> 和 <select>）之类的表单位素通常本身维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常生存在组件的 state 属性中，而且只能通过利用 setState()来更新。
我们可以把两者联合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的利用。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

写一个普通表单：
<form>  <label> 名字: <input type="text" name="name" />  </label>  <input type="submit" value="提交" /></form>将表单写为受控组件，我们可以在提交时打印着名称等利用：
class NameForm extends React.Component {  constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this);  }  handleChange(event) { this.setState({value: event.target.value});  }  handleSubmit(event) { alert('提交的名字: ' + this.state.value); event.preventDefault(); // 阻止表单提交的默认事故  }  render() { return (    <form onSubmit={this.handleSubmit}>       <label>       名字:       <input type="text" value={this.state.value} onChange={this.handleChange} />       </label>       <input type="submit" value="提交" />    </form> );  }}由于在表单位素上设置了 value 属性，因此体现的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会实行并更新 React 的 state，因此体现的值将随着用户输入而更新。
对于受控组件来说，输入的值始终由 React 的 state 驱动。
别的标签实现受控组件

<input type="text">, <textarea> 和 <select> 之类的标签都非常相似—它们都继承一个 value 属性，你可以利用它来实现受控组件。
textarea

<form onSubmit={this.handleSubmit}> <label>    文章:    <textarea value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /></form>select

<form onSubmit={this.handleSubmit}> <label>    选择你喜欢的风味:    <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>处理处罚多个输入

当须要处理处罚多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理处罚函数根据 event.target.name 的值选择要实行的利用。
比方：
handleInputChange(event) { const target = event.target; const value = target.name === 'isGoing' ? target.checked : target.value; const name = target.name; this.setState({    [name]: value });  }  render() { return (    <form>       <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> );  }受控输入空值

在受控组件上指定 value 的 prop 会阻止用户更改输入。假如你指定了 value，但输入仍可编辑，则大概是你不测地将value 设置为 undefined 或 null。
下面的代码演示了这一点。（输入最初被锁定，但在短时间耽误后变为可编辑。）
// 指定value的值为'hi'的时候输入框不可编辑ReactDOM.render(<input value="hi" />, mountNode);setTimeout(function() {  ReactDOM.render(<input value={null} />, mountNode);}, 1000);受控组件的替代品

偶然利用受控组件会很贫苦，因为你须要为数据变革的每种方式都编写事故处理处罚函数，并通过一个 React 组件转达全部的输入 state。在这些情况下，你大概渴望利用非受控组件(ref), 这是实现输入表单的另一种方式。

React学习之——受控组件(个人条记)

所属分类: 问答交流

新帖推荐: 30日

推荐作品