在 React 挂钩中，handleChange 中没有 e.target with setValue()

Question

因为我正在学习如何使用钩子构建 React 表单，所以我浏览了 3 个以 this one 结尾的快速帖子。一切进展顺利，直到我进入最后一步，您使用以下方法创建自定义挂钩：

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: Cannot read property ‘value’ of undefined at handleChange

我很确定这是在指向我

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

如果我 console.log(e) 我得到 'email'，如预期的那样（我想？），但是如果我尝试 console.log(e.target) 我得到 undefined .所以很明显 e.target.value 不存在。我可以通过使用

来让它工作

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

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

谢谢

Answer 1

问题来自 Input 组件中的 onChange 属性

    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);
}}

或更改回调的实现。

Answer 2

试试这个：

const handleChange = e => {
   const { inputValue } = e.target;
   const newValue = +inputValue;
   setValue(newLimit);
};

在 React 挂钩中，handleChange 中没有 e.target with setValue()

In React hook, no e.target in handleChange with setValue()

javascript

reactjs

forms

react-hooks