Как исправить функцию 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,
  })
}