react中受控组件与非受控组件--

非受控组件：随用随取

render() {
        return (
            <div>
                <h1>非受控组件</h1>
                <form action="" onSubmit={this.handleSub}>
                    姓名：<input ref={(e) => {this.username = e}} type="text" name="username" /><br></br>
                    密码：<input ref={(e) => {this.password = e}} type="text" name="password"/><br></br>
                    <button>提交</button>
                </form>
            </div>
        )
    }
    handleSub = (event) => {
        event.preventDefault()  //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的
        console.log(this)
        const {username, password} = this
        alert(`姓名:${username.value}, 密码：${password.value}`)
    }

受控组件：输入框随着用户的输入把值维护到状态里面去，等用的时候从状态里面获取，例如vue直接利用v-model双向绑定的原理实现

render() {
    return (
      <div>
        <h1>非受控组件</h1>
        <form action="" onSubmit={this.handleSub}>
          姓名：
          <input onChange={this.handlename} type="text" name="username" />
          密码：
          <input onChange={this.handleword} type="text" name="password" />
          <button>提交</button>
        </form>
      </div>
    );
  }
  handlename = (e) => {
    this.setState({username:e.target.value})
  }
  handleword = (e) => {
    this.setState({password:e.target.value})
  }

  handleSub = (event) => {
    event.preventDefault(); //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的
    console.log(this);
    const { username, password } = this.state;
    alert(`姓名:${username}, 密码：${password}`);
  };