受控组件和非受控组件强力一波

受控组件

其值由 React 控制的输入表单元素称为“受控组件”。

class NameForm extends React.Component {constructor(props) {super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {this.setState({value: event.target.value});
  }

  handleSubmit(event) {alert('A name was submitted:' + this.state.value);
    event.preventDefault();}

  render() {
    return (<form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

通过绑定 onChange 实现了类似双向绑定
理解：首先 input 的显示的值受 value={this.state.value}
控制，输入时通过 onChange 函数回调，将新接受的值设置回this.state.value, 从而再作用到组件的显示，形成了双向绑定的感觉

非受控组件

在大多数情况下，我们推荐使用 受控组件 来实现表单。在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件。

默认值 defaultValue

在 React 的生命周期中，表单元素上的 value 属性将会覆盖 DOM 中的值。
使用非受控组件时，通常你希望 React 可以为其指定初始值，但不再控制后续更新。要解决这个问题，你可以指定一个 defaultValue 属性而不是 value。

render() {
  return (<form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

文件输入标签

<input type="file" />

在 React 中，<input type=”file” /> 始终是一个不受控制的组件，因为它的值只能由用户设置，而不是以编程方式设置。

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

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

受控和非受控你该怎么选

原文
Conclusion
Both the controlled and uncontrolled form fields have their merit. Evaluate your specific situation and pick the approach — what works for you is good enough.
If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine. You don’t have to listen to what the various articles are saying is“bad.”
Also, this is not an once-and-for-all decision: you can always migrate to controlled inputs. Going from uncontrolled to controlled inputs is not hard.
两种方法都有各自的优点，根据具体使用场景评估一下，从中选择一种更适合的方式，如果表单在 UI 反馈方面非常简单，那么使用 ref 的不受控组件就完全没有问题。你不必听各种各样的文章说什么是“坏的”，同样也不是说不能更改，毕竟总是可以转换到可控制的，使用受控的话也不是很费劲。