一、事件处理

1. 通过onXxx属性指定事件处理函数(注意⼤⼩写)

• React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
• 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

2. 通过event.target得到发⽣事件的DOM元素对象

// 1.创建一个组件
  class Demo extends React.Component{
    input1 = React.createRef()

    showData = (event) => {
      // 这里获取的是button的DOM元素对象
      console.log(event.target);
    }
    render() {
      return (
        <div>
          <input type="text" placeholder="点击按钮显示数据"/>&nbsp;
          <button onClick={this.showData}>点击获取DOM元素对象</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo/>, document.getElementById('test'))

二、收集表单数据

1.非受控组件

非受控组件：表单数据交由DOM节点处理，表单数据现用现取。

  class Login extends React.Component{
    handleSubmit = (event) => {
      // 阻止标签默认行为
      event.preventDefault()
      const {usernameNode, passwordNode} = this
      // 通过ref获取dom节点，然后获取表单值
      alert(usernameNode.value +':'+ passwordNode.value)
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={c => this.usernameNode = c} placeholder="用户名" name='username'/><br/>
          <input type="text" ref={c => this.passwordNode = c} placeholder="密码" name='password'/><br/>
          <button type="submit">登陆</button>&nbsp;
        </form>
      );
    }
  }
  ReactDOM.render(<Login/>, document.getElementById('test'))

2.受控组件

受控组件：表单数据由状态控制

class Login extends React.Component{
    state = {
      username: '',
      password: '',
    }
    handleSubmit = (event) => {
      // 阻止标签默认行为-阻止点击提交，刷新页面
      event.preventDefault()
      // 表单数据从组件state中获取
      const {username, password} = this.state
      alert(username +':'+ password)
    }
    saveUsername = (event) => {
      this.setState({username: event.target.value})
    }
    savePassword = (event) => {
      this.setState({password: event.target.value})
    }
    render() {
      const {username, password} = this.state
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.saveUsername} placeholder="用户名" name='username'/><br/>
          <input type="text" onChange={this.savePassword} placeholder="密码" name='password'/><br/>
          <button type="submit">登陆</button>&nbsp;
        </form>
      );
    }
  }
  ReactDOM.render(<Login/>, document.getElementById('test'))