React 中如何使已勾選的複選框可編輯

在 React 中如何添加一個預設為已勾選狀態但仍然可以編輯的複選框 我在一個 React 組件中有一個複選框: <input name="enable" type="checkbox" /> 我希望它默認為已勾選狀態,但用戶仍然可以更改其值。 使用以下方式無法達到目標: <input name="enable" type="checkbox" checked="checked" /> 複選框的狀態無法被改變。 解決方法是使用 defaultChecked 屬性: <input name="enable" type="checkbox" defaultChecked={true} /> 如果複選框的狀態取決於某個變量的值(例如在編輯表單中,從數據庫中獲取實際值),則可以使用以下方式: <input name="enable" type="checkbox" defaultChecked={existing\_enable\_value} />

React 中的單向數據流

在使用 React 開發時,你可能會遇到「單向數據流(Unidirectional Data Flow)」這個概念。這究竟是什麼意思呢? 單向數據流並不是 React 獨有的概念,但作為 JavaScript 開發者,你可能第一次聽到這個名詞。 一般來說,這個概念指的是數據只有一種方式可以被傳遞到應用程序的其他部分。 在 React 中,這意味著: 狀態(state)被傳遞到視圖和子組件 动作(actions)由視圖觸發 動作可以更新狀態 視圖和子組件接收到狀態的更改 視圖是應用程序狀態的結果。狀態只有在動作發生時才能改變。當動作發生時,狀態會被更新。 由於單向綁定的特性,數據無法反向流動(例如使用雙向綁定時),這帶來了一些關鍵優勢: 較少的錯誤,因為你對數據有更多的控制權 更容易進行調試,因為你知道數據是從哪裡來的 更高效,因為庫已經知道每個系統部分的邊界是什麼 每個組件永遠只擁有一個狀態。受這個狀態影響的任何數據只能影響其下方的組件:即它的子組件。 改變組件的狀態永遠不會影響它的父組件、它的兄弟組件或應用程序中的其他組件- 只會影響它的子組件。 這就是為什麼狀態通常會在組件樹中往上移動,以便它可以在需要訪問它的組件之間進行共享。