为什么表单输入未定义?

问题描述 投票:1回答:1

我是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
       
        })
      }

一切都很好。

javascript reactjs forms events setstate
1个回答
-1
投票

您的代码看起来不错,效果很好。必须完全创建codesandbox。看看自己:)

© www.soinside.com 2019 - 2024. All rights reserved.