在 React 中使用 onChange 事件

1. 帶有 React 輸入的 onChange
2. 在 React 中手動觸發 onChange 事件

事件系統是 React 框架中最有用的功能之一。

尤其是 onChange 事件是 React 中最常處理的事件之一。它基於 vanilla JavaScript 中眾所周知的 onchange 屬性，但 React 中的 onChange 事件包括一些附加功能。

它還以駝峰命名法編寫，以幫助開發人員將其與常規 JavaScript 事件區分開來。

瞭解 onChange 事件的工作原理可以幫助你編寫更強大的動態表單。

帶有 React 輸入的 onChange

在 React 中，當使用者的輸入以任何方式發生變化時，onChange 事件就會發生。當使用者輸入附加文字、選擇不同選項、取消選中核取方塊或其他類似情況時，輸入可能會發生變化。

想象一下，當你有一個核取方塊輸入並且需要在狀態中儲存使用者的選擇（布林值值）時的情況。在這種情況下，onChange 將非常有用。每當使用者改變主意並取消選中它時，狀態都會更新。

下面是一個例子：

return (
		<input type="checkbox" onChange={(e) => this.setState("status": e.target.value)}/> 
		)

這是一個 onChange 事件是多麼有用的簡單演示。

我們通過將輸入值儲存在我們的元件 state 中，使這個元素成為一個受控輸入。該術語描述了其內部狀態與 React 元件的狀態合併以提供單一事實來源的輸入。

請注意，在 JSX 中，JavaScript 表示式需要放在兩個大括號之間。我們也可以單獨定義處理程式並在大括號內呼叫它。

例如：

<input type="checkbox" onChange={(e) => handleChange(e)}/> 

對於更復雜的處理程式函式，這將是一種更具可讀性的方法。

在 React 中手動觸發 onChange 事件

在某些情況下，你可能需要繞過預設行為並手動觸發 onChange 事件。

想象一下瀏覽器自動填充了你的密碼，因此 onChange 不會觸發，但你需要它來執行動畫。在這種情況下，你必須手動觸發 onChange。

為了避免相同事件的重複例項，有時 React 會故意吞下一些事件而不執行它們。解決方案是使用本機值設定器 setNativeValue() 。要深入瞭解該問題，請檢視此有用的部落格文章。