react非受控組件

在大多數情況下，我們推薦使用 受控組件 來處理表單數據。在一個受控組件中，表單數據是由 React 組件來管理的。另一種替代方案是使用非受控組件，這時表單數據將交由 DOM 節點來處理。

要編寫一個非受控組件，而不是爲每個狀態更新都編寫數據處理函數，你可以 使用 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>
    );
  }
}

在 CodePen 上嘗試

因爲非受控組件將真實數據儲存在 DOM 節點中，所以再使用非受控組件時，有時候反而更容易同時集成 React 和非 React 代碼。如果你不介意代碼美觀性，並且希望快速編寫代碼，使用非受控組件往往可以減少你的代碼量。否則，你應該使用受控組件。

如果你還是不清楚在某個特殊場景中應該使用哪種組件，那麼 這篇關於受控和非受控輸入組件的文章 會很有幫助。

默認值

在 React 渲染生命週期時，表單元素上的 value 將會覆蓋 DOM 節點中的值，在非受控組件中，你經常希望 React 能賦予組件一個初始值，但是不去控制後續的更新。 在這種情況下, 你可以指定一個 defaultValue 屬性，而不是 value。

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

同樣，<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked，<select> 和 <textarea> 支持 defaultValue。

文件輸入

在 HTML 中，<input type="file"> 可以讓用戶選擇一個或多個文件上傳到服務器，或者通過使用 File API 進行操作。

<input type="file" />

在 React 中，<input type="file" /> 始終是一個非受控組件，因爲它的值只能由用戶設置，而不能通過代碼控制。

您應該使用 File API 與文件進行交互。下面的例子顯示瞭如何創建一個 DOM 節點的 ref 從而在提交表單時獲取文件的信息。

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

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

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

---

經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。