如何修復 ReactJS 中的「不受控製到受控輸入轉換」警告？

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>

在此範例中，狀態最初是一個空對象，使得輸入欄位不空對象，使得輸入欄位不空對象受控制。但是，當設定欄位值時，輸入將受到控制，從而導致警告。

可能的解決方案

要解決此問題，請考慮以下解決方案：

1. 初始化狀態中的字段值：使用佔位符值定義初始狀態下的輸入欄位。例如：

<code class="javascript">this.state = { fields: { name: '' } }</code>

2. 使用短路評估：使用短路評估來設定 value 屬性來處理未定義的值。例如：

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

透過實作這些解決方案，您可以確保您的輸入元素保持一致的狀態，避免不受控制輸入轉換錯誤。

以上是如何修復 ReactJS 中的「不受控製到受控輸入轉換」警告？的詳細內容。更多資訊請關注PHP中文網其他相關文章！