为什么表单输入未定义？

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

为什么表单输入未定义？

why is form input undefined?

javascript

forms

events

setstate

reactjs