ReactJS 中處理不受控到受控輸入轉換警告
當元件將不受控輸入元素轉換為受控輸入元素時，ReactJS 會向開發人員發出警告。此錯誤與下列訊息相關聯：
警告：元件正在更改要控制的文字類型的不受控制的輸入。輸入元素不應從不受控制切換到受控制（反之亦然）。決定在組件的生命週期內使用受控或非受控輸入元素。
了解原因
當元件的狀態將輸入欄位初始化為不受控（即缺少受控值屬性）但隨後設定其值，從而有效地將其轉換為受控輸入時，就會發生錯誤。
範例程式碼
考慮以下程式碼片段：
<code class="javascript">constructor(props) {
super(props);
this.state = {
fields: {}
}
}
...
onChange(field, e){
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});
}
...
render() {
return(
<div className="form-group">
<input
value={this.state.fields["name"]}
onChange={this.onChange.bind(this, "name")}
type="text"
refs="name"
placeholder="Name *"
/>
</div>
)
}</code>在此範例中，狀態最初是一個空對象，使得輸入欄位不空對象，使得輸入欄位不空對象受控制。但是，當設定欄位值時，輸入將受到控制，從而導致警告。
可能的解決方案
要解決此問題，請考慮以下解決方案：
<code class="javascript">this.state = { fields: { name: '' } }</code><code class="javascript">value={this.state.fields.name || ''}</code>透過實作這些解決方案，您可以確保您的輸入元素保持一致的狀態，避免不受控制輸入轉換錯誤。
以上是如何修復 ReactJS 中的「不受控製到受控輸入轉換」警告？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
