React-表单(受控组件和非受控组件)

一,受控组件

在HTML当中，像input,textarea和select这类表单元素会维持自身状态，并根据用户输入进行更新。
在React中，可变的状态通常保存在组件的state中，并且只能用 setState() 方法进行更新.
React根据初始状态渲染表单组件，接受用户后续输入，改变表单组件内部的状态。
因此，将那些值由React控制的表单元素称为：受控组件。

代码演示如下:

1.input文本标签的受控方法

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});
    this.setState({
   value: event.target.value.trim()});//这可以去除首尾空格
  }

  handleSubmit(event) {
   
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
   
    return (
      <form onSubmit={
   this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={
   this.state.value} onChange={
   this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

效果:

当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 even