受控组件

1、定义

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

 <script type="text/babel">
      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>
          );
        }
      }
      ReactDOM.render(
        <div>
          <NameForm />
        </div>,
        document.getElementById("root")
      );
    </script>

在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

2、好处

受控组件的值受控于state，每次组件值的变化会导致设置state 相关的处理函数触发。这使得修改或验证用户输入变得简单。

handleChange(event) {
          this.setState({value: event.target.value.toUpperCase()});
}

如果我们要强制要求所有名称都用大写字母书写，只要在设置state时，进行相应的修改即可。