Javascript 对更改作出反应以处理状态对象

关于表单中的React state和onChange事件，我有一个有趣的问题。在我的React组件中，我将信息存储在状态中，其中包括对象。当用户键入更改时，我希望状态中的部分对象发生更改。举个例子，这里是我所说的状态：

this.state = {
      total: 0,
      email: '',
      creditCards: [],
      selectedCreditCard: {},
      billingAddresses: [],
      shippingAddresses: [],
      selectedBillingAddress: {},
      selectedShippingAddress: {},
    }

这是组件的状态，这是我的句柄更改功能：

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

正如您可能知道的，这种类型的函数不适用于状态中的对象。例如，当用户键入他们的信用卡号时，我希望此.state.selectedCreditCard.creditCardNumber是更改的内容。当然，在我的表格中设置它的方式：

<input
          type="text"
          name="selectedCreditCard.creditCardNumber"
          value={selectedCreditCard.creditCardNumber}
          onChange={(evt) => handleChange(evt)}
        />

handleChange（evt）}
/>

---

传递到onChange的“name”只是一个字符串，而不是指向状态中某个对象的键值的指针。因此，除了解构状态中的每个对象并将每个key:value直接放置在状态中而不是对象中之外，该函数没有简单的工作方式；这样做是可能的，但这样做代码会变得非常麻烦。我希望所有这些都有意义。有没有办法操纵状态中的对象，并让窗体传递指向对象中键的指针，而不是字符串？谢谢。

我从您的描述中了解到，您希望更新状态对象属性中的嵌套子对象，如下所示

//默认状态
此.state={
总数：0，
电子邮件：“”，
信用卡：[]，
所选信用卡：{}，
计费地址：[]，
发货地址：[]，
selectedBillingAddress:{}，
selectedShippingAddress:{}，
}

更新到这样的东西

//handleEvent后的状态
{
总数：0，
电子邮件：“”，
信用卡：[]，
所选信用卡：{
信用卡号码：“102131313”
}, 
计费地址：[]，
发货地址：[]，
selectedBillingAddress:{}，
selectedShippingAddress:{}，
}

如果是这样的话。 下面是一个基于递归的解决方案，使用基于“的名称字符串创建嵌套对象

  handleChange(event) {
    //use split function to create hierarchy. example:
    //selectedCreditCard.creditCardNumber -> [selectedCreditCard , creditCardNumber]
    const obj = this.generate(
      event.target.name.split("."),
      event.target.value,
      0
    );
    
    this.setState({ ...obj });
  }

  //use recursion to generate nested object. example
  //([selectedCreditCard , creditCardNumber] , 12 , 0) -> {"selectedCreditCard":{"creditCardNumber":"12"}} 
  generate(arr, value, index) {
    return {
      [arr[index]]:
        index === arr.length - 1 ? value : this.generate(arr, value, index + 1)
    };
  }

我已经创建了一个codesandbox演示，供您在此进行更多探索。

---

这是一个离题的问题，但是您使用React类组件而不是更简单的React钩子有什么原因吗？哦，我应该提到“外部”组件是一个保存状态的类组件。表单是它自己的功能组件，其中状态作为道具传递给它。老实说，我没有使用钩子，因为我还没有很好地理解它们，尽管我确实计划在将来进一步了解它们。自从我停止使用React类组件以来，已经有很长时间了，以至于我没有做一些研究就忘了setState的特性。我可以帮助你使用React钩子。所以，你认为使用React钩子会让我更容易完成这个过程吗？关于React，一般来说，是的。您可能必须学习React钩子，因为将来它们“可能”会反对它，而且大多数现代实现都使用React钩子。关于您的示例，您只需进行一次定制的handleChange，专门更新selectedCreditCard。