使用React hooks处理复杂表单状态数据

使用hooks替换this.setState()

自从React hooks*发布以来已经有一段时间了，我很喜欢这个特性。这个hooks把我勾上了！

Hooks允许我们创建更小，可组合，可重用，更易管理的React组件。

您可能正在使用Hooks的一个用例是：使用useState或useReducer管理表单状态。

让我们考虑一个场景，您必须管理具有多个输入的复杂表单状态，这些表单输入可以是几种不同的类型，如文本，数字，日期输入。表单状态甚至可以具有嵌套信息，例如用户的地址信息，它具有子字段，例如address.addressLine1，address.addressLine2等。

也许您还必须根据当前状态更新表单状态，例如toggle切换按钮。

现在，如果您对每个单独的表单字段使用useState，那么您可以根据当前状态计算新状态。