React 无法读取 [event.target.name] 上未定义的 属性 'name'

Question

我有一个第 3 方组件使用 Phone 在此处输入 https://github.com/bl00mber/react-phone-input-2#react-phone-input-2 我需要获取用户输入的值并使用以下处理 onChange 的方法设置表单状态：

const handlePhoneChange = (event) => {
  setFormState({
    ...formState,
    [event.target.name]: event.target.value,
  });
};

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

<PhoneInput
      country={"us"}
      error={hasError("phone")}
      helperText={hasError("phone") ? formState.errors.phone[0] : null}
      name="phone"
      value={formState.values.phone || ""}
      onChange={handlePhoneChange}
    />

但是，当我尝试在 phoneInput 组件中键入数字时，出现错误 TypeError: Cannot read 属性 'name' of undefined。请帮我解决这个问题。

Answer 1

如果你 read the documentation for the onchange event，有 4 个参数可用：onChange(value, country, e, formattedValue)。

您访问 event 的方式不正确，因为您正在访问第一个位置参数，即输入的 value。尝试访问 event.target 时出错，因为它不是 Event 对象。

Event 对象可用作第三个位置参数，因此如果您这样使用它，它应该可以工作：

const handlePhoneChange = (value, country, event) => {
  setFormState({
    ...formState,
    [event.target.name]: value,
  });
};