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函数和J. D.。

this.state.studentName

此外，如果您打算更改表单中的多个值，我将重构您的<Child handleSubmit={this.handleSubmit} onChange={this.handleChange} studentName={this.state.studentName}/>函数，使其动态化。

handleChange

如何修复onSubmit功能在单击按钮时不显示状态？

1 个答案: