【发布时间】：2022-11-02 03:29:50
【问题描述】：
在 HTML 中，
<input>、<textarea>和<select>等表单元素 通常维护自己的状态并根据用户输入进行更新。https://reactjs.org/docs/forms.html#controlled-components
能给我举个例子？
谢谢。
【问题讨论】：
标签： javascript html reactjs dom
【发布时间】：2022-11-02 03:29:50
【问题描述】：
简单地说 - 维护自己的state 意味着跟踪自己的值，处理值更改等。
如果<select> 组件保持其state 并且您选择/更改值，它将将该值保存在state 中并向您显示结果（<form> 对此更改一无所知）。发送<form> 时，您必须向组件询问其当前值。
如果<select> 不维护它的state，则对值的任何更改都会发送到其父级，通常是<form>。 <form> 将值保存在其state 中（或将其发送给其父级）并为<select> 提供要显示的新值（更改为props）。以这种方式发送表单时，您已经将值存储在 <form> 状态中。
两种方式各有利弊。
更多关于 props 和 state 的信息： https://reactjs.org/docs/state-and-lifecycle.html
【讨论】：
在 react 中使用控件有两种主要方式——受控和不受控。
非受控是控件负责管理其值的地方，您只需使用它公开的值 - 通常通过处理诸如“onChange”之类的事件或通过引用控件。这就是控制被认为是事实来源的地方。
<input type="text" ref={inputRef} onChange={handleOnChange}/>
受控是您的应用程序作为事实来源的地方，通常通过本地状态（例如 useState）进行管理。您可以使用此状态通过其 value 属性告诉控件它应该显示什么，而不管该控件将显示什么。
<input type="text" value={value} onChange={handleOnChange} />
大多数时候你会使用受控的。
【讨论】：