React之表单数据收集

官网

• 一般React的唯一数据源就是state，只能用setState()来进行改变
• 在HTML中表单元素一般会有自己维护的state，根据用户的输入自行改变

受控组件

• 将表单维护的状态放到React中的state中，这种就是受控组件
• 也可以说是双向的数据绑定(表单维护的状态与React中的状态)

import {Component} from 'react'

export default class NameForm extends Component {

  state = { 
    value: "" 
  }

  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>
    );
  }
}

非受控组件

通过获取DOM来进行来获取标签属性值，获取输入表单的值

import {Component, createRef} from 'react'

export default class NameForm extends Component {

  inpEle = createRef()
  state = { 
    value: "" 
  }

  handleClick = () => {
    const value = this.inpEle.current.value;
    console.log(`提交的数据为${value}`);
  }

  render() {
    return (
      <>
        <input type="text" ref={this.inpEle}/>
        <button onClick={this.handleClick}>提交</button>
      </>
    );
  }
}

• 当我们触发点击事件的时候，获取dom，然后获取到标签的属性拿到输入的值

对比