React 无法读取 [event.target.name] 上未定义的属性“名称”

Question

我在这里有一个使用电话输入的第三方组件，https://github.com/bl00mber/react-phone-input-2#react-phone-input-2 我需要获取用户输入的值，并使用下面处理change的方法设置表单状态：

const handlePhoneChange = (event) => {

  setFormState({

    ...formState,

    [event.target.name]: event.target.value,

  });

};

这是我对以下第三方组件的配置：

<PhoneInput

      country={"us"}

      error={hasError("phone")}

      helperText={hasError("phone") ? formState.errors.phone[0] : null}

      name="phone"

      value={formState.values.phone || ""}

      onChange={handlePhoneChange}

    />

但是，当我尝试在phoneInput组件中键入数字时，我收到错误TypeError：无法读取未定义的属性“name”。请帮助我解决这个问题。

Answer 1

如果您阅读 onchange 事件的文档，则有 4 个参数可以访问：。onChange(value, country, e, formattedValue)您访问的方式不正确，因为您正在访问第一个位置管理，即输入。尝试访问时出错，因为它不是对象。eventvalueevent.targetEvent该对象可用作第三个位置参数，因此，如果您这样使用它，它应该可以工作：Eventconst handlePhoneChange = (value, country, event) => {&nbsp; setFormState({&nbsp; &nbsp; ...formState,&nbsp; &nbsp; [event.target.name]: value,&nbsp; });};