在 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() 。要深入了解该问题，请查看此有用的博客文章。