以 React 状态存储的 onChange 函数中的一个输入被另一个输入覆盖答案

【问题标题】：one input in onChange function stored in React state is overwrite by another input以 React 状态存储的 onChange 函数中的一个输入被另一个输入覆盖
【发布时间】：2021-11-13 16:36:09
【问题描述】：

我有一个名为 formData 的 React 状态对象，其中包含用户结帐运输数据，而在 formData 内部还有另一个名为 billingAdress 的对象，其中包含用户帐单数据。

state = {
user: null,
formData: {
  name: null,
  company: null,
  adressOne: null,
  adressTwo: null,
  town: null,
  postcode: null,
  country: null,
  phone: null,
  isBillingAdress: false,
  billingAdress: {
    name: null,
    company: null,
    adressOne: null,
    adressTwo: null,
    town: null,
    postcode: null,
    country: null,
    phone: null,
  }}

输入上有onChange函数

<label>Full Name:</label>
        <input
          name="name"
          onChange={this.handleBillingChange}
          value={this.state.formData.billingAdress.name}
        />

函数看起来像这样

handleBillingChange = event => {
const formData = { ...this.state.formData, billingAdress: {[event.target.name]: event.target.value }}
const errors = { ...this.state.errors, [event.target.name]: '' }
this.setState({ formData, errors})

}

我试图将整个 billingAdress 对象存储在 formData 对象中，当我开始输入第一个帐单地址输入时，它运行良好，但是当我开始输入第二个输入时，第一个输入从状态中消失。

【问题讨论】：

标签： javascript reactjs spread

【解决方案1】：

问题在于您的handleBillingChange 函数。

尝试此操作以在更改一个属性时保持formData.billingAdress 的当前状态。

const handleBillingChange = event => {
  const formData = {
    ...this.state.formData,
    billingAdress: {
      ...this.state.formData.billingAdress,
      [event.target.name]: event.target.value
    }
  }

  const errors = { ...this.state.errors, [event.target.name]: '' }
  this.setState({ formData, errors})
}

【讨论】：

成功了，非常感谢