reactjs - 状态未更新 React 来自

Question

我在 gatsby 中编写了一个表单，但无法更新输入值。

与 gatsby 一起处理表单时需要帮助我正在尝试创建一个表单来托管在 netlify 表单上。

我在下面添加了代码块，如果您需要更多信息，请告诉我。

const ContactPage = () => {

const [formState, setFormState] = useState({
    name: "",
    email: "",
  })

const handleChange = (e) => {
    setFormState({
      ...formState,
      [e.target.name]: e.target.value,
    })
  }

const handleSubmit = (e) => {
  e.preventDefault()
}

return (
<form
 onSubmit={handleSubmit}
 name="contact"
 method="post"
 
>  
   <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          onChange={handleChange}
          value={formState.name}
          placeholder="Enter your name"
        />
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          onChange={handleChange}
          value={formState.email}
          placeholder="Enter your email"
        />
        <button type="submit">Submit</button>
      </form>
)

}

输入字段未更新

• 当我输入姓名或电子邮件地址时，输入字段中没有任何更新

标签： reactjsforms

Answer 1

您使用 e.target.name 并且使用它是个好主意。但是您没有填写“输入”的名称我在每个输入表单中都添加了名称

const { useState } = require('react');

const ContactPage = () => {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
  });

  const handleChange = (e) => {
    console.log(e.target.name, e.target.value);
    setFormState((formState) => ({
      ...formState,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit} name='contact' method='post'>
      <label htmlFor='name'>Name</label>
      <input
        type='text'
        id='name'
        name='name'
        onChange={handleChange}
        value={formState.name}
        placeholder='Enter your name'
      />
      <label htmlFor='email'>Email</label>
      <input
        type='email'
        id='email'
        name='email'
        onChange={handleChange}
        value={formState.email}
        placeholder='Enter your email'
      />
      <button type='submit'>Submit</button>
    </form>
  );
};

export default ContactPage;