以下是一些標題選項，重點關注問題方面和 ReactJS 上下文： 1. **React 中的受控輸入與非受控輸入：如何避免「切換狀態」警告？ 2. **重新

ReactJS 中的受控與不受控輸入錯誤

使用React 元件時，了解受控輸入和不受控輸入之間的區別非常重要。預設情況下，輸入是不受控制的，這表示它們的值由 DOM 管理。然而，當我們在輸入上設定 value 屬性時，它就變成了受控輸入，這意味著它的值由 React 管理。

如果元件最初將不受控輸入渲染為受控輸入而沒有定義初始值，React 將發出像您提到的那樣的警告：
「元件正在更改要控制的文字類型的不受控制的輸入。

在提供的程式碼中：

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

出現問題是因為在建構子中， fields 被初始化為空物件： fields: {} 。這意味著最初， this.state.fields.name 將是未定義的。結果，輸入欄位將不受控制。但是，當使用者輸入值時，狀態會更新，使輸入成為受控元件。這種不一致的行為會觸發 React 警告。

可能的解決方案：

1. 設定初始預設值： 使用下列指令初始化建構函式中的欄位名稱的預設值，例如“name”：“”。這可確保輸入欄位作為具有定義值的受控元件啟動。
2. 使用短路評估：將輸入的 value 屬性設為以下內容： value={this.狀態.欄位.name || ''}。如果 this.state.fields.name 未定義，則其計算結果為空字串，確保即使沒有定義的預設值，輸入欄位也會以受控方式啟動。

以上是以下是一些標題選項，重點關注問題方面和 ReactJS 上下文： 1. **React 中的受控輸入與非受控輸入：如何避免「切換狀態」警告？ 2. **重新的詳細內容。更多資訊請關注PHP中文網其他相關文章！