В ловушке React нет e.target в handleChange с помощью setValue ()

Question

Так как я учусь создавать формы 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: Невозможно прочитать свойство 'значение' из undefined в handleChange

, что я почти уверен, чтоуказывая мне на

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

Если я console.log (e), я получаю 'email', как и ожидалось (я думаю?), но если я пытаюсь использовать console.log (e.target), я получаю неопределенное значение.Очевидно, что e.target.value не существует.Я могу заставить его работать, просто используя

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

, но я не знаю, какие проблемы это может иметь.Это хорошая идея?Есть ли недостатки в том, чтобы заставить его работать таким образом?

Спасибо

Answer 1

Проблема исходит от 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);
}}

или изменить реализацию обратного вызова.