為什麼我在 ReactJS 應用程式中收到「元件正在更改要控制的文字類型的不受控制的輸入」警告？

不受控制和受控制的輸入元素：ReactJS 警告指南

ReactJS 建議保持輸入元素控制狀態的一致性。在某些情況下，您可能會遇到警告：「元件正在更改要控制的文字類型的不受控制的輸入。」讓我們深入探討原因並探索有效的解決方案。

問題根源

在 ReactJS 中，輸入元素可以是受控的，也可以是不受控的。受控輸入是其值由元件狀態管理的輸入，而非受控輸入允許使用者直接變更其值。當最初聲明為不受控的輸入後來轉換為受控輸入時，就會出現問題。

考慮以下程式碼：

<br>class MyComponent extends React.Component {<br> 建構子(props) {<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

}

}

pre>

在此範例中，「name」輸入不受控制，因為其值最初未定義(this.state. fields["name"])，允許使用者自由變更。但是，當使用者輸入值時，onChange 處理程序會設定 this.state.fields.name，有效地將輸入轉換為受控狀態。此狀態轉換會觸發警告。

解決問題

1. 要解決警告，您可以：

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

定義狀態中的初始欄位：
2. 為每個欄位宣告this.state.fields 並使用空字串。這確保了所有輸入最初都受到控制。

   <code class="python">value={this.state.fields.name || ''}</code>

使用短路評估：

使用短路評估來指派 value 屬性，這確保未定義值的計算結果為空字串。

透過實作任一解決方案，您都可以消除錯誤並確保輸入控制狀態的一致性。

以上是為什麼我在 ReactJS 應用程式中收到「元件正在更改要控制的文字類型的不受控制的輸入」警告？的詳細內容。更多資訊請關注PHP中文網其他相關文章！