反應 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 的“名稱”只是一個字符串，而不是指向狀態中的一個對象中的鍵值的指針。 因此，除了解構 state 中的每個對象並將每個 key:value 直接放置在 state 中而不是對象中之外，此函數沒有簡單的方法可以工作； 這樣做是有可能的，但是這樣代碼會變得非常麻煩。 我希望這一切都是有道理的。 有什么方法可以操作狀態中的對象，並讓表單傳遞指向對象中鍵的指針，而不是字符串？ 謝謝。

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)
    };
  }

我已經創建了一個 codeandbox 演示供您在此處探索更多信息。 演示鏈接