React 非受控元件

非受控元件（Uncontrolled Components）

使用非受控元件

在大部分情況下，推薦使用 

受控元件

 來實作表單、輸入框等狀态控制。在受控元件中，表單等資料都有React元件自己處理。這裡将介紹另外一種非受控元件，表單的資料有Dom自己控制。

非受控元件實作的重點是用Refs特性擷取真實Dom來代替每次資料變更去更新元件的狀态值。

例如下面的代碼，在非受控元件中記錄被使用者輸入的名字：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    //在送出時，直接使用ref擷取的真實Dom擷取值
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

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

嘗試代碼

。

由于在非受控元件中使用Refs特性擷取了真實Dom的執行個體，是以在使用非受控組建時，更容易內建React和非React代碼，在某些時候也可以省略一些代碼。但是建議除了特殊情況，都使用受控元件。

如果想要深入了解什麼情況下使用哪種元件，建議閱讀 

受控和不受控表單輸入

 一文。

元件預設值

在React渲染的生命周期，表單中的value屬性會被覆寫Dom中的value值。在使用非受控元件時，通常需要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>
  );
}           

例如中“defaultValue = "Bob"”就是指定了一個預設值。同樣地， 

<input type="checkbox">

 和 

<input type="radio">

 支援 

defaultChecked

屬性， 

<select>

 标簽支援 

defaultValue

屬性。