這是受控的還是非受控的 React 組件？

Question

我閱讀了關於這個問題的答案，但沒有一個與我的設置相似：

什么是受控組件和非受控組件？

我有一個父組件和許多子組件作為輸入。 每個輸入都有一個defaultValue ，它使用從父級收到的 prop 設置，輸入的驗證在onBlur上執行。 這是因為驗證是異步的，所以onChange會像瘋了一樣減慢應用程序。

這個編排是如何命名的？ “受控”的傳統定義似乎是在每個onChange上更新的輸入，而“不受控制”的輸入是管理自己內部狀態的輸入，稍后可以通過 ref 訪問該狀態。 我的設置似乎兩者都沒有，坐在中間的某個地方 - 或者不是？

更新：這是一個CodeSandbox 。

Answer 1

如果我正確理解你的設置，你的輸入是不受控制的，因為它們的狀態保存在 DOM 中而不是 React 狀態中。 驗證是一個單獨的問題，可以同步或異步發生。 無論您為驗證做什么，您都可以讓 React 狀態保存值。 請注意，大多數情況下，您甚至不想阻止輸入具有無效值 - 您只想確保用戶無法在值無效時提交表單。 因此，您可以使用onChange處理程序在 state 上設置一些值，如下所示：

<input type="text" 
  value={this.state.myValue} 
  onChange={val => this.setState({myValue: val}, 
    ()=> this validateMyValue(this.state.myValue))}} />

this.validateMyValue可以是異步的，並且在驗證失敗時執行所需的任何操作。 那將是一個做你想做的事情的受控組件。