ReactJS-如何使用React Bootstrap将输入值保存到一个状态

Question

我使用React Bootstrap创建了一个表单，但我在其中遇到了问题，问题是我无法将值保存到我的状态

这是我的代码

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 = () => {
console.log('Values are', students)
}  

return (
<Form onSubmit={submit}>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>First Name</Form.Label>
<Form.Control type="text" placeholder="Enter First Name" value={students.firstName} onChange={handleInputChange}/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" placeholder="Enter Last Name" value={students.lastName} onChange={handleInputChange} />
</Form.Group>
</Form.Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>

)
}
export default StudentsForm

而且每当我在<Form.Control />中添加值时，我甚至无法在上面键入

预期的输出是，值应该保存到一个状态，当我单击提交按钮时，在文本字段中输入的值应该记录在控制台中。

Answer 1

由于您正在根据；name"；在onChange事件中从组件获取的属性，您需要将其包含在属性中。

<Form onSubmit={submit}>
<Form.Row>
<Form.Group as={Col}>
<Form.Label>First Name</Form.Label>
<Form.Control
type="text"
name="firstName" //<--------here, available as event.target.name in the onChange event
placeholder="Enter First Name"
value={students.firstName}
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Last Name</Form.Label>
<Form.Control
type="text"
name="lastName" //<--------here, available as event.target.name in the onChange event
placeholder="Enter Last Name"
value={students.lastName}
onChange={handleInputChange}
/>
</Form.Group>
</Form.Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>

Answer 2

const submit = (e) => { //on click submit you can console you state
e.preventDefault();
console.log('Values are', students)
}
return(
<>
<Form.Control
type="text"
placeholder="Enter First Name"
name="firenter code herestName" // You have to provide name here
value={students.firstName} 
onChange={handleInputChange} />



<Form.Control
type="text"
placeholder="Enter Last Name"
name="lastName" // Here also
value={students.lastName} onChange={handleInputChange} />

<>

)