react 可控组件与不可控组件

2020-04-26 / 316

一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以 使用 ref 来从 DOM 节点中获取表单数据。

示例

可控组件

      class ConstrolInput extends React.Component {
        constructor(props) {
          super(props);        
          this.state = {value: "Hello world"};

          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
        }
        handleSubmit(event) {
          event.preventDefault(); 
          alert(this.state.value);
        }
        handleChange(event) {
          this.setSate({value: event.target.value});
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <input defaultValue={this.state.value} onChange={this.handleChange} />
              <button type="submit">Alert</button>
            </form>
          );
        }
      }

不可控组件

      class UnconstrolInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleSubmit(event) {
          event.preventDefault();
          var input = this.refs.input;
          alert(input.value);
        }

        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <input defaultValue="Hello world" ref="input" />
              <button type="submit">Alert</button>
            </form>
          );
        }
      }

不可控组件中间的数据的状态是未知的,只有在需要打印数据的时候才从DOM节点获取。而可控组件的数据变换会更新到state,也就是说状态的变换是一直保持同步的。

相对来说可控组件更值得推荐使用,虽然代码量上比不可控组件多些。