【Day11】表单：非受控元件 Uncontrolled Component

受控 vs. 非受控元件

受控元件：value 值由 React component 使用 state 负责处理，随时监听内容来改变值
非受控元件：value 值由原始 DOM 或使用 ref 以 HTML 传统表单方式处理，不受 component 的 state 控制

大多数的情况下，React 推荐使用受控元件（controlled component）来实作表单

撰写非受控元件

如果要写一个 uncontrolled component，
可以使用 ref 从 DOM 取得表单的资料。

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

预设值

在 React 的 render 生命周期里，
表单上的 value attribute 会覆写掉 DOM 的值。

由於在 component mount 後改变 defaultValue 属性，
不会造成任何在 DOM 里面的值更新。
要处理这种情况，
可以指定 defaultValue attribute 而非 value。

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