React中的受控组件与非受控组件详解

<script type="text/babel">
  // 1、创建组件
  class UncontrolledComponent extends React.Component {
    handleSubmit = (event) => {
      event.preventDefault();
      alert(this.input.value);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            <input type="text" ref={(input) => (this.input = input)} />
          </label>
          <button type="submit">提交</button>
        </form>
      );
    }
  }
  // 2、渲染组件
  ReactDOM.render(<UncontrolledComponent />, document.getElementById("test"));
</script>

<script type="text/babel">
  // 1、创建组件
  class ControlledComponent extends React.Component {
    // 初始化state状态值
    state = {
      inputValue: "",
    };
    handleChange = (event) => {
      this.setState({ inputValue: event.target.value });
    };
    handleSubmit = (event) => {
      event.preventDefault();
      console.log(this.state.inputValue);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Input:
            <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }
  }
  // 2、渲染组件
  ReactDOM.render(<ControlledComponent />, document.getElementById("test"));
</script>

<script type="text/babel">
  // 1、创建组件
  class ControlledComponent extends React.Component {
    state = {
      inputValue: "",
    };
    handleChange = (event) => {
      this.setState({ inputValue: event.target.value });
    };
    handleSubmit = (event) => {
      event.preventDefault();
      console.log(this.state.inputValue);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </label>
          <span>{this.state.inputValue}</span>
        </form>
      );
    }
  }
  // 2、渲染组件
  ReactDOM.render(<ControlledComponent />, document.getElementById("test"));
</script>