Question

我是JS的新手，也许会问一个愚蠢的问题。但我需要您的帮助才能理解。我有一个表格。

const Form = () => {
  const[form, setForm] = useState({
      
      username: ''

  })

  const handleChange = (event) => {
    setForm({
        ...form,
        [event.target.name]: event.target.value
   
    })
  }

  const handleSubmit= (event) => {
    console.log(form.username)
    event.preventDefault()
  }
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <div>Username</div>
          <input
            name='username'
            type='text'
            placeholder='name'
            value={form.username} 
            onChange={handleChange}
          />
          <button type='submit'>Ok</button>
        </div>
      </form>
    );
  }


export default Form

为什么console.log值未定义？当我更改handleChange时

const handleChange = (event) => {
        setForm({
          username: event.target.value
       
        })
      }

一切正常。

Answer 1

您的代码看起来不错并且运行良好。必须绝对创建codesandbox。看看自己：）

为什么表单输入未定义？

1 个答案: