javascript - React onChange 来处理状态对象

Question

关于表单中的 React 状态和 onChange 事件，我有一个有趣的问题。在我的 React 组件中，我将信息存储在状态中，其中包括对象。当用户输入更改时，我希望状态中的该对象的一部分发生更改。例如，这是我正在谈论的状态:

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

这是组件的状态，这是我的句柄更改函数:

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

您可能已经知道，这种类型的函数不适用于状态中的对象。例如，当用户输入他们的信用卡号时，我希望 this.state.selectedCreditCard.creditCardNumber 发生变化。当然，以我的形式设置它的方式:

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

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

Answer 1

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

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

更新成这样

//state after handleEvent
{
      total: 0,
      email: '',
      creditCards: [],
      selectedCreditCard:{
       creditCardNumber:"102131313"
      }, 
      billingAddresses: [],
      shippingAddresses: [],
      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 演示，供您在这里探索更多内容。 demo-link