react 官网笔记 05 表单

在react中 表单元素与其他DOM元素有些许不同,主要是因为他们需要保持内部状态,比如input, 虽然可以在react中使用它们的默认行为,但是如果能够使用一个函数处理输入,获得值应该更好,为了实现这个目标的技术叫做'受控组件'

 传统的input的内部状态依赖于用户的输入而改变(当用户输入后,js调用input的引用的el.value就发生了变化),而在react中,组件的状态与state保持一致,同时只能通过setState改变.

 所谓受控组件,就是表单元素(比如input)的value值与组件的state绑定在一起,通过setState控制.

 我的理解是:纵使没有react,input输入框输入依然可以改变input显示的内容,但是这样默认是无法通知state更新的,所以一般都要绑定一个onChage事件,在里面setState更新state,当js经历一次循环后,比较virtual BOM和真实BOM的值,如果一样就不从新渲染了.没经过验证,不知道在循环结束后state没有随着输入变化会不会把input的值修改回来,有待验证, 个人的理解对错不定

 在受控组件中,每个state都要有一个对应的事件与之进行绑定

 大部分表单空间的使用都是value加上监听事件绑定即可,除了file类型有些特殊,不使用value.它的值是只读的,不可设置

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(
      this
    );
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.files[0].name
      }`
    );
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input
            type="file"
            ref={input => {
              this.fileInput = input;
            }}
          />
        </label>
        <br />
        <button type="submit">
          Submit
        </button>
      </form>
    );
  }
}

如果回调事件需要多个组件复用

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>