React 使用输入名称更新嵌套对象

Question

假设我们有以下状态：

const [sample,setSample] = useState({
    key:{
        value:'',
        otherValue:''
    }
});

现在我们都知道，如果我们在这样的输入上使用 name=key ：

<input name="key" value={key} .../>

我们可以通过以下方式更改“key”属性：

 set sample({...sample,[e.target.name]:e.target.value});

但我想知道，我们是否可以进一步扩展它以与嵌套状态一起使用。 如果我们使用 name=key.value 来更改“key”下的“value”或“otherValue”属性，如下所示：

<input name="key.value" value={key.value} .../>

但在这种情况下，它只是为状态创建了一个名为“key.value”的键，这不是我们想要的。

我发现了这个方法设置包含嵌套对象的State的最佳方法是什么但我发现该解决方案有点暴力而且不是那么优雅。

有什么办法可以让这个工作不用暴力破解吗？ （如果嵌套值可能会发生变化怎么办？）

Answer 1

如果你愿意，你可以尝试使用react-hook-form来解决你的问题。

请参阅此处的一些示例，以使用嵌套注册：https://react-hook-form.com/docs/useform/register