时间戳

首页 > 解决方案 > 在 React 钩子中，使用 setValue() 的 handleChange 中没有 e.target

javascript - 在 React 钩子中，使用 setValue() 的 handleChange 中没有 e.target

问题描述

因为我正在学习如何使用钩子构建 React 表单，所以我浏览了 3 篇快速文章，最后以这个. 一切都很顺利，直到我使用以下命令创建自定义挂钩时进入最后一步：

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange
  };
}

输入是：

const Input = ({ type, name, onChange, value, ...rest }) => (
    <input
        name={name}
        type={type}
        value={value}
        onChange={event => {
            event.preventDefault();
            onChange(name, event.target.value);
        }}
        {...rest}
    />
);

表格是：

const Form = () => {
  const email = useFormInput("");
  const password = useFormInput("");

  return (
    <form
      onSubmit={e =>
        e.preventDefault() || alert(email.value) || alert(password.value)
      }
    >
      <Input 
        name="email" 
        placeholder="e-mail" 
        type="email" 
        {...email} 
      />
      <Input
        name="password"
        placeholder="password"
        type="password"
        {...password}
      />
      <input type="submit" />
    </form>
  );
};

所以在useFormInput()Chrome 中抱怨

TypeError：无法在句柄更改处读取未定义的属性“值”

我很确定这是指向我

function handleChange(e) {
  setValue(e.target.value);
}

如果我 console.log(e) 我收到“电子邮件”，正如预期的那样（我认为？），但如果我尝试 console.log(e.target) 我得到未定义。所以显然 e.target.value 不存在。我可以通过使用它来工作 

setValue(document.getElementsByName(e)[0].value);

但我不知道这可能有什么样的问题。这是一个好主意吗？让它以这种方式工作有缺点吗？

谢谢

标签： javascriptreactjsformsreact-hooks

解决方案

问题来自组件onChange中的道具Input

    onChange={event => {
        event.preventDefault();
        onChange(name, event.target.value);
    }}

你这样调用onChange（onChange(name, event.target.value); 两个参数，第一个是一个字符串），而在你的自定义钩子中你定义回调是这样的

  function handleChange(e) {
    setValue(e.target.value);
  }

它期待一个论点，一个事件。

所以要么onChange用一个参数（事件）调用：

onChange={event => {
    event.preventDefault();
    onChange(event);
}}

或更改回调的实现。

推荐阅读