在没有库的情况下使用React中的表单
最初发布于https://sergiodxa.com/articles/react-working-with-forms/
在JavaScript中处理表单可能是一项艰巨的任务，在本文中我们将学习如何驯服它们。
不受控制的输入
首先，我们需要讨论不受控制的输入，我说输入它也是select或textarea。这是输入的默认状态，在这种情况下，我们不做任何特殊操作，让浏览器处理它的值。
功能 形成（） { 常量 （信息， setMessage） = 应对。useState（“”）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; setMessage（事件。目标。分子。信息。值）; 事件。目标。重启（）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <输入 名称=“信息” 类型=“文本” /> </形成> </> ）; } 正如我们在上面的例子中看到的，我们更新了我们的状态 信息 使用用户提交表单后输入的值，按 输入，并重置输入值我们只需使用重置整个表单 重启（） 形式的方法。
这是正常的DOM操作来读取值并重置它，没有什么特别的React。
受控输入
现在让我们谈谈有趣的部分，控制器输入/ select / textarea是一个元素，其中值绑定到状态，我们需要更新状态以更新用户看到的输入值。
功能 形成（） { 常量 （信息， setMessage） = 应对。useState（“”）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; setMessage（“”）; } 功能 handleChange（事件） { setMessage（事件。目标。值）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <输入 名称=“信息” 类型=“文本” 的onChange={handleChange} 值={信息} /> </形成> </> ）; } 我们的例子设定了 输入 价值 信息 附上一个 的onChange 我们称之为事件监听器 handleChange，在这个功能里面我们需要的 event.target.value 我们将收到输入的新值，即当前值加上用户键入的值，我们调用 setMessage 要更新我们的组件状态，这将更新内容 p 标签和价值 输入 标记以匹配新状态。
如果我们想重置我们可以调用的输入 setMessage（ “”），就像我们一样 handleSubmit，这将重置状态，并这样做输入的值和 p 内容。
添加简单验证
现在让我们添加一个简单的验证，复杂的验证是相似的，但有更多的规则，在这种情况下，如果特殊字符，我们将使输入无效 _ 用来。
功能 形成（） { 常量 （信息， setMessage） = 应对。useState（“”）; 常量 （错误， SETERROR） = 应对。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; SETERROR（空值）; setMessage（“”）; } 功能 handleChange（事件） { 常量 值 = 事件。目标。值; 如果 （值。包括（“_”）） SETERROR（“你不能使用下划线”）; 其他 SETERROR（空值）; setMessage（值）; } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <输入 ID=“信息” 名称=“信息” 类型=“文本” 的onChange={handleChange} 值={信息} /> {错误 && （ <标签 样式={{ 颜色： “红色” }} htmlFor=“信息”> {错误} </标签> ）} </形成> </> ）; } 我们创建两个状态，一个用于输入值，另一个用于错误消息。和我们之前一样 handleSubmit 我们会重置 信息 状态为空字符串，另外我们将重置 错误 国家 空值。
在里面 handleChange 我们将读取输入的新值并查看下划线是否存在。如果我们找到下划线，我们会将错误状态更新为消息 “你不能使用下划线” 如果不存在，我们会将其设置为 空值。验证后我们将更新 信息 以新价值陈述。
在我们返回的UI中，我们将检查是否存在 错误 并呈现一个 标签 文本颜色红色指向输入并显示内部错误消息。错误位于标签内，让用户单击它并将焦点移动到输入。
控制Textarea
在我说与之合作之前 输入 和 textarea的 是相似的，它实际上是，让我们改变我们渲染的元素 textarea的，我们上面的代码将继续工作，没有任何其他更改，如下所示。
功能 形成（） { 常量 （信息， setMessage） = 应对。useState（“”）; 常量 （错误， SETERROR） = 应对。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; } 功能 handleChange（事件） { 常量 值 = 事件。目标。值; 如果 （值。包括（“_”）） { SETERROR（“你不能使用下划线”）; } 其他 { SETERROR（空值）; setMessage（值）; } } 返回 （ <> <p>{信息}</ p> <形成 的onsubmit={handleSubmit}> <textarea的 ID=“信息” 名称=“信息” 的onChange={handleChange} 值={信息} /> {错误 && （ <标签 样式={{ 颜色： “红色” }} htmlFor=“信息”> {错误} </标签> ）} </形成> </> ）; } 虽然通常 textarea的 是一个内部内容为的元素 在React中改变我们使用的值 值 支柱就像一个输入和 的onChange 事件，使输入和textarea之间的变化相似。
控制选择
现在让我们来谈谈 选择。和。一样 textarea的 你把它视为正常 输入通过一个 值 支持选定的值并听取值的变化 的onChange。传递给的值 选择 应匹配其中一个选项的值，以将其中一个显示为当前选定的选项。
功能 形成（） { 常量 （选项， 的SetOption） = 应对。useState（空值）; 常量 （错误， SETERROR） = 应对。useState（空值）; 功能 handleSubmit（事件） { 事件。的preventDefault（）; } 功能 handleChange（事件） { 的SetOption（事件。目标。值）; } 功能 handleResetClick（） { 的SetOption（空值）; } 功能 handleHooksClick（） { 的SetOption（“挂钩”）; } 返回 （ <> <p>{选项}</ p> <形成 的onsubmit={handleSubmit}> <选择 的onChange={handleChange} 值={选项}> <选项 值=“类”>类</选项> <选项 值=“流量”>助焊剂</选项> <选项 值=“终极版”>终极版</选项> <选项 值=“挂钩”>钩</选项> </选择> </形成> <按键 类型=“按钮” 的onClick={handleResetClick}> 重启 </按钮> <按键 类型=“按钮” 的onClick={handleHooksClick}> 钩 </按钮> </> ）; } 使用文件输入
现在让我们谈谈文件输入，这个特殊输入无法控制，但仍然可以获取一些数据并将其保存在状态中以便在其他地方显示。在下面的示例中，我们将为隐藏文件输入创建自定义UI。
功能 形成（） { 常量 （字FileKey， setFileKey） = 应对。useState（日期。现在（））; 常量 （文件名， setFileName） = 应对。useState（“”）; 常量 （文件大小， setFileSize） = 应对。useState（0）; 常量 （错误， SETERROR） = 应对。useState（空值）; 功能 resetFile（） { setFileKey（日期。现在（））; setFileName（“”）; setFileSize（0）; SETERROR（空值）; } 功能 handleChange（事件） { 常量 文件 = 事件。目标。档（0）; setFileSize（文件。尺寸）; 如果 （文件。尺寸 > 100000） SETERROR（“那个文件太大了”）; 其他 SETERROR（空值）; setFileName（文件。名称）; } 返回 （ <形成> <标签 htmlFor=“文件”> 选择 一个 单 文件 至 上载。 （最大 尺寸： 100KB） <BR /> {文件名 && （ <> <强大>文件：</ strong> {fileName} （{文件大小 / 1000}KB） </> ）} <输入 ID=“文件” 类型=“文件” 键={字FileKey} 的onChange={handleChange} 样式={{ 显示： “没有” }} /> </标签> {错误 && （ <标签 样式={{ 颜色： “红色” }} htmlFor=“文件”> {错误} </标签> ）} <按键 类型=“按钮” 的onClick={resetFile}> 重启 文件 </按钮> </形成> ）; } 我们监听更改事件并读取文件大小和名称并验证文件的大小，如果它太大我们设置 错误 说明消息 “那个文件太大了”，如果文件不是那么大，我们会将错误设置为 空值，如果用户之前选择了一个大文件，这就让我们删除以前的错误。
我们还有一个重置输入的按钮，因为我们无法控制我们可以使用的状态 键 强制React再次渲染输入并在此过程中重置它，我们使用当前日期和每次用户点击 重置文件 它将获取当前日期并将其保存到 字FileKey 状态并重置输入。