Question

非受控组件是在内部存储其自身状态的组件，当需要时，可以使用 ref 查询 DOM 并查找其当前值。这有点像传统的 HTML。

在下面的 UserProfile 组件中，我们通过 ref 引用 name 输入框：

class UserProfile extends React.Component {
constructor(props) {
  super(props)
  this.handleSubmit = this.handleSubmit.bind(this)
  this.input = React.createRef()
}

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

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

在大多数情况下，建议使用受控组件来实现表单。