Блог

Я пытаюсь выполнить простую задачу формы, чтобы попытаться изучить формы React, но мне трудно понять ее синтаксис.

Когда я пробую следующий код, он работает без проблем:

 import React, { useState } from "react";

function InputForm() {
  const [emailValue, setEmailValue] = useState("");

  console.log(emailValue);

  return (
    <>
      <form>
        <label>
          Email:
          <input
            type="text"
            name="input"
            value={emailValue}
            placeholder="type your email"
            onChange={(e) => setEmailValue(e.target.value)}
          />
        </label>
        <br />
        <br />
        <button type="submit" name="test">
          Submit Email
        </button>
      </form>
    </>
  );
}

export default InputForm;
  

Однако, когда я пытаюсь очистить его, чтобы в возврате не было логики, я получаю сообщение об ошибке при определении моего метода handleChange.

 import React, { useState } from "react";

function InputForm() {
  const [emailValue, setEmailValue] = useState("");

  handleChange(e) {
    const { name, value } = e.target;
    setEmailValue({ [name]: value });
  };

  console.log(emailValue);

  return (
    <>
      <form>
        <label>
          Email:
          <input
            type="text"
            name="input"
            value={emailValue}
            placeholder="type your email"
            onChange={handleChange}
          />
        </label>
        <br />
        <br />
        <button type="submit" name="test">
          Submit Email
        </button>
      </form>
    </>
  );
}

export default InputForm;
  

Может кто-нибудь, пожалуйста, объяснить, почему это так не работает? Ошибка, которую я получаю, заключается в том, что React не ожидает { скобка после handleChange(e) … таким образом, сообщения об ошибках консоли бесполезны при попытке выяснить, почему он его не принимает.

Спасибо!

Это не React, отклоняющий что-либо, просто, ну, это неправильный синтаксис JavaScript.

Вы захотите

 function InputForm() {
  const [emailValue, setEmailValue] = useState("");

  const handleChange = (e) {
    const { name, value } = e.target;
    setEmailValue({ [name]: value });
  };

  // ...
  

(и даже в этом случае вы смешиваете и сопоставляете типы состояний — у вас есть атом состояния, который якобы является строкой (поскольку вы инициализируете его с помощью a "" ), а затем вы присваиваете ему объект… Возможно, вы ищете setEmailValue(value); там.)