我在访问组件上的状态时遇到问题。我不知道我是不是完全没有分配状态,或者它是否必须做一些没有绑定和正确传递道具的东西。
当用户单击“添加学生”表单时,它会执行此操作。当用户然后填写表单并提交时,我想显示一个警告,但由于某种原因,我没有得到任何我的州值。
constructor(props) {
super(props);
this.state = {
studentName: '',
studentId: '',
isHidden: true
}
}
handleChange = e => {
this.setState({
studentName: e.target.value,
studentId: e.target.value2
})
}
handleSubmit = e => {
e.preventDefault();
alert("student name: " + this.state.studentName);
}
render() {
return (
<div>
<Button
variant="primary"
onClick={this.toggleHidden.bind(this)}
size="lg" active>
Add Student
</Button>
{!this.state.isHidden && <Child handleSubmit={this.handleSubmit} />}
</div>
)
}
const Child = props => {
return (
<Form>
<Form.Row>
<Col>
<Form.Control
name="studentName"
value ={props.studentName}
placeholder="Student name"
onChange={props.onChange}
/>
</Col>
<Col>
<Form.Control
...
/>
</Col>
</Form.Row>
<Button
onClick={props.handleSubmit}
variant="primary"
type="submit">
Submit
</Button>
</Form>
)
}
你需要传递你的handleChange函数和this.state.studentName
。
<Child handleSubmit={this.handleSubmit} onChange={this.handleChange} studentName={this.state.studentName}/>
此外,如果您计划更改表单中的多个值,我会重构您的handleChange
函数以使其动态化。
handleChange = e => {
this.setState({
[e.target.name]: e.target.value,
})
}