React表单form用法 – ReactJS实战教程

上一章ReactJS实战教程请查看：React受控组件和非受控组件之间的区别

表单是任何现代web应用程序的组成部分，它允许用户与应用程序交互，并从用户收集信息。表单可以执行许多任务，这些任务取决于你的业务需求和逻辑的性质，如用户身份验证、添加用户、搜索、过滤、预订、订购等。表单可以包含文本字段、按钮、复选框、单选按钮等。

创建表单

React提供了一种有状态的、反应性的表单构建方法。通常是组件而不是DOM处理React表单。在React中，表单通常由受控组件实现。

React中主要有两种类型的表单输入。

• 非受控组件
• 受控组件

非受控组件

非受控输入类似于传统的HTML表单输入，DOM本身处理表单数据。在这里，HTML元素维护自己的状态，这些状态将在输入值更改时更新。要编写非受控组件，需要使用ref从DOM获取表单值。换句话说，不需要为每个状态更新编写事件处理程序，可以使用ref从DOM访问表单的输入字段值。

例子

在本例中，代码接受非受控组件中的字段用户名和公司名。

import React, { Component } from 'react';  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.updateSubmit = this.updateSubmit.bind(this);  
      this.input = React.createRef();  
  }  
  updateSubmit(event) {  
      alert('已经成功地输入了用户名和公司名.');  
      event.preventDefault();  
  }  
  render() {  
    return (  
      <form onSubmit={this.updateSubmit}>  
        <h1>非受控表单例子</h1>  
        <label>Name:  
            <input type="text" ref={this.input} />  
        </label>  
        <label>  
            CompanyName:  
            <input type="text" ref={this.input} />  
        </label>  
        <input type="submit" value="提交" />  
      </form>  
    );  
  }  
}  
export default App;  

受控组件

在HTML中，表单元素通常维护自己的状态，并根据用户输入进行更新。在受控组件中，输入表单元素由组件而不是DOM处理。在这里，可变状态保存在state属性中，仅使用setState()方法更新。

受控组件具有控制在每个onChange事件上传递给它们的数据的函数，而不是只抓取一次数据，例如，当你单击submit按钮时。然后将该数据保存为state并使用setState()方法进行更新。这使得组件可以更好地控制表单元素和数据。

受控组件通过道具获取当前值，并通过回调(如onChange事件)通知更改。父组件通过处理回调和管理自己的状态来“控制”这种变化，然后将新值作为道具传递给受控组件，它也被称为“哑组件”。

例子

import React, { Component } from 'react';  
class App 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}>  
            <h1>受控表单例子</h1>  
            <label>  
                Name:  
                <input type="text" value={this.state.value} onChange={this.handleChange} />  
            </label>  
            <input type="submit" value="提交" />  
         </form>  
      );  
  }  
}  
export default App;  

处理受控组件中的多个输入

如果希望处理多个受控输入元素，请向每个元素添加name属性，然后处理程序函数根据event.target.name的值决定如何处理。

例子

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            personGoing: true,  
            numberOfPersons: 5  
        };  
        this.handleInputChange = this.handleInputChange.bind(this);  
   }  
   handleInputChange(event) {  
       const target = event.target;  
       const value = target.type === 'checkbox' ? target.checked : target.value;  
       const name = target.name;  
       this.setState({  
           [name]: value  
       });  
  }  
  render() {  
      return (  
          <form>  
              <h1>多输入控制表单示例</h1>  
              <label>  
                  Is Person going:  
                  <input  
                    name="personGoing"  
                    type="checkbox"  
                    checked={this.state.personGoing}  
                    onChange={this.handleInputChange} />  
             </label>  
             <br />  
             <label>  
                 Number of persons:  
                 <input  
                 name="numberOfPersons"  
                 type="number"  
                 value={this.state.numberOfPersons}  
                 onChange={this.handleInputChange} />  
             </label>  
         </form>  
     );  
  }  
}  
export default App;