16、React表单与组件属性的使用技巧

React表单与组件属性的使用技巧

1. React表单的替代处理方式

在React中，使用受控表单元素是最佳实践，但这种方法需要额外的工作，因为你需要手动捕获更改并更新状态。如果使用字符串、属性或状态来定义 value 、 checked 和 selected 属性的值，那么该元素就是受控的（由React控制）。

而当 value 属性未设置（既不设置为状态也不设置为静态值）时，表单元素可以是不受控的。尽管由于视图的DOM状态可能与React的内部状态不同，这种方式不被鼓励，但在构建简单表单并提交到服务器时，不受控元素可能会很有用。

通常，使用不受控组件时，你需要定义一个表单提交事件，通常是按钮上的 onClick 和/或表单上的 onSubmit 。有了这个事件处理程序后，你有两个选择：
- 像处理受控元素一样捕获更改，并使用状态进行提交，但不用于值（毕竟这是一种不受控的方法）。
- 不捕获更改。

1.1 捕获更改的不受控元素

在React中，不受控组件意味着 value 属性不是由React库设置的。此时，组件的内部值（或状态）可能与组件表示（或视图）中的值不同，即内部状态和表示之间存在不一致。

例如，以下文本输入字段是不受控的，因为React没有设置值：

render() {
    return <i