单击按钮时如何修复 onSubmit 函数不显示状态？

Question

我无法访问组件的状态。我不知道我是否根本没有分配状态，或者它是否必须做一些没有绑定和正确传递道具的事情。

当用户单击“添加学生”时，会呈现一个表单。当用户然后填写表单并提交时，我想显示一个警报，但由于某种原因，我的状态值没有得到任何东西。

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

Answer 1

你需要传递你的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,
  })
}