javascript - 为什么表单输入未定义？

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绝对确定。你自己看看:)