React JS 中的 value 和 defaultValue 之間的真正區別是什么？

Question

在 React 的主頁上，有一個帶有textarea的最后一個示例（使用外部插件的組件）：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      defaultValue={this.state.value}
    />

當我輸入時， textarea會更新。

現在，我嘗試使用value更改defaultValue ：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      value={this.state.value}
    />

結果是相同的（與defaultValue ，即當我輸入時， textarea會隨着更新的textarea在視覺上更新）。

那么，兩者之間的真正區別是什么？

Answer 1

只要您更改 value 中使用的value ，就不會有任何區別。 如果您不更新變量並設置了 textareas 值，則無法通過鍵入來更改 textarea 的值。 通過使用 defaultValue，您不必更新任何變量。

Answer 2

在此處查看演示圖片

當您將默認值與 input 標簽一起使用時，您可以在沒有 onchange 事件處理程序的情況下編輯輸入值。

如果您使用帶有輸入標簽的值，您需要使用 onchange 事件處理程序來更改輸入值。

Answer 3

我認為一個很好的例子是，如果您使用硬編碼字符串

使用 defaultValue 道具：

 function App(){ return( <textarea defaultValue="foo" // only by default foo /> ); } ReactDOM.render(<App/>, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

使用價值道具

 function App(){ return( <textarea value="foo" // will forever be foo /> ); } ReactDOM.render(<App/>, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

因此，雖然本段下方的代碼段可能看起來與使用value defaultValue相同，因為onChange可能會更新狀態值（因此看起來它正在更新defaultValue ） - 事實並非如此。 它仍然是一個不受控制的組件，將直接從用戶輸入更新其值。 它只是使用初始呈現時this.state.value的任何默認值進行初始化。

<textarea
  id="markdown-content"
  onChange={this.handleChange}
  defaultValue={this.state.value}
/>