在React.js中处理表单

与其他库（例如angular）不同，react中的表单需要自己处理。反应中有两种形式的输入

• 受控输入

• 输入不受控制

受控组件或元素是由React函数处理的组件或元素。示例是在onChange函数调用上更新字段。大多数组件都以受控方式处理。

受控表格组件示例

import React, { Component } from 'react';
class ControlledFormExample extends Component {
   constructor () {
      this.state = {
         email: ''
      }
   }
   changeEmailHandler = event => {
      this.setState({
         email: event.target.value
      });
   }
   render () {
      return (
         <form>
            <input type="email"
               name="email"
               value={this.state.email}
               onChange={this.changeEmailHandler}
            />
         </form>
      );
   }
}

导出默认的ControlledFormExample

在这里，只要电子邮件输入字段发生更改，我们就会更新状态。

如果我们在表单中有多个字段，我们可以在单个函数中处理所有的onChange，如下所示：

handleChange(evt) {
   this.setState({ [evt.target.name]: evt.target.value });
}

在上面的通用状态更新中，我们应该使字段名称和状态变量具有相同的名称。

不受控制的组件通常由DOM处理。我们使用ref保留对元素的引用，并在提交动作时对其进行处理。

演示元素不受控制的处理的示例。

submitDataHandler = event => {
   event.preventDefault();
   console.log(this.refs.nameRef.value); //will give us the name value
}
render() {
   return (
      <div>
         <form onSubmit={this.submitDataHandler}>
            <div>
               <input type="text" name="name" ref="nameRef" />
            </div>
         </form>
      </div>
   );
}

我们必须提取不受控制的组件中的字段值以操纵或处理提交。

我们可以添加自定义验证并向用户显示反馈。

import React, { Component} from 'react';
class FormExample extends Component {
   constructor(props) {
      super(props);
      this.state = {
         username: '',
         id: null,
         errormessage: ''
      };
   }
   myChangeHandler = (event) => {
      let nam = event.target.name;
      let val = event.target.value;
      let err = '';
      if (nam === "id") {
         if (val !="" && !Number(val)) {
            err = <strong>Your id must be a number</strong>;
         }
      }
      this.setState({errormessage: err});
      this.setState({[nam]: val});
   }
   render() {
      return (
         <form>
            <h1>Hello {this.state.username} {this.state.id}</h1>
            <p>Enter your name:</p>
            <input
               type='text'
               name='username'
               onChange={this.myChangeHandler}
            />
            <p>Enter your id:</p>
            <input
               type='text'
               name='id'
               onChange={this.myChangeHandler}
            />
            {this.state.errormessage}
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));

提取textarea的值，并在上面添加value属性。

<textarea value={this.state.myText} />
class FormExample extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         myText: 'The content of textarea'
      };
   }
   render() {
      return (
         <form>
            <textarea value={this.state.myText} />
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));