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

【问题标题】：React Cannot read property 'name' of undefined on [event.target.name]React 无法读取 [event.target.name] 上未定义的属性“名称”
【发布时间】：2020-09-02 13:56:22
【问题描述】：

我有一个第 3 方组件在此处使用电话输入 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 property 'name' of undefined。请帮我解决这个问题。

【问题讨论】：

将console.log(event.target)放在setFormState之前会显示什么？
@JózefPodlecki 谢谢。我得到了这个问题的答案。但是，我现在需要访问 formState,s 的值。

标签： javascript reactjs react-native react-props

【解决方案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,
  });
};

【讨论】：

这是正确的@Terry 在这种情况下，我设置它之后，如果我需要将值设置为formState，如果我使用这种方法，如何访问它 const testData = (evt) = > { console.log("电话：" + formState.phone); };但我收到错误“未定义”
另外，我意识到如果您运行 console.log 来查看它返回的内容， event.target.name 不会返回任何内容。这意味着该值未在 State 中设置
我不得不使用 inputProps={{ name: 'phone', required: true, autoFocus: true }}