React Bootstrap表单问题：无法输入内容且无法将值保存至state

我帮你找到了问题的根源，咱们一步步来解决：

首先，你的两个问题其实是同一个原因导致的：你的<Form.Control/>组件没有设置name属性。

先看你的handleInputChange函数：

const handleInputChange = (event) => {
  const { name, value } = event.target
  setStudents({ ...students, [name]: value })
}

这里你通过解构event.target获取name和value，然后用[name]作为对象键来更新state。但如果输入框没设置name属性，name的值就是undefined，这直接导致：

• 无法把输入值对应到state的firstName和lastName字段
• 因为state没被正确更新，绑定了value={students.firstName}的输入框一直拿到旧的state值，自然没法输入内容

另外，你的submit函数没阻止表单的默认提交行为，点击按钮后页面会刷新，控制台日志会一闪而过，也看不到正确结果。

修正后的完整代码 #

const StudentsForm = (props) => {
  const initialFormState = { firstName: '', lastName: ''}
  const [students, setStudents] = useState(initialFormState)
  
  const handleInputChange = (event) => {
    const { name, value } = event.target
    setStudents({ ...students, [name]: value })
  }
  
  const submit = (event) => {
    // 阻止表单默认刷新行为
    event.preventDefault()
    console.log('Values are', students)
  }
  
  return (
    <Form onSubmit={submit}>
      <Form.Row>
        <Form.Group as={Col}>
          <Form.Label>First Name</Form.Label>
          {/* 添加与state字段名一致的name属性 */}
          <Form.Control 
            type="text" 
            placeholder="Enter First Name" 
            name="firstName"
            value={students.firstName} 
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group as={Col}>
          <Form.Label>Last Name</Form.Label>
          {/* 同样添加对应name属性 */}
          <Form.Control 
            type="text" 
            placeholder="Enter Last Name" 
            name="lastName"
            value={students.lastName} 
            onChange={handleInputChange} 
          />
        </Form.Group>
      </Form.Row>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  )
}
export default StudentsForm

关键修改说明 #

• 给每个<Form.Control/>添加name属性，属性值必须和state里的字段名（firstName、lastName）完全匹配，这样handleInputChange才能正确识别要更新的字段
• 在submit函数中调用event.preventDefault()，阻止表单默认的页面刷新行为，这样就能在控制台正常查看打印的state值了

现在再测试一下，输入框应该可以正常输入内容，点击提交按钮后，控制台会正确打印出你输入的姓名信息啦！

内容的提问来源于stack exchange，提问作者Bryl