Блог

Я пытаюсь отправить форму из дочернего компонента с помощью кнопки, размещенной в родительском компоненте. Родительский элемент — это слайд с кнопкой Next, и я отображаю свой дочерний компонент на одной странице слайда.

Что я хочу сделать, так это: когда я нажимаю кнопку next от родительского элемента, я должен перейти к следующему слайду, а также отправить дочернюю форму.

код: родительский компонент:

 import Slider from "react-slick";

class Parent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    
      errors: {}
    }
     next() {
        this.slider.slickNext();
      }
      previous() {
        this.slider.slickPrev();
      }
       
      render() {
        const settings = {
          dots: true,
          infinite: false
        };
    
        return (
    <div>
          <Slider ref={c => (this.slider = c)} {...settings}>
                        <div style={{ textAlign: "center" }} key={1} >
                          
                          <Child /> //this is the Child I want to submit once I press Next Button
                          
                          <Button id="btn" className="btn btn-primary float-right " type="submit" onClick={this.next}> Next</Button> //this is the next button which sould trigger the submit from Child
                        </div>
                        <div key={2} >
                          <Page2/> 
                          <Button className="btn btn-primary float-right " id="btn" onClick={() =>  this.finish()>Finish</Button>
                          <Button id="btn" className="btn btn-primary float-right " onClick={this.previous}> Previous</Button>
                        </div>           
          </Slider>
    </div>
      );
      }
}
 

Дочерний компонент:

 class Child extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            info: '',
            infoID: 0,
            valid:false,
            errors: {}
        }
this.handleValidSubmit = this.handleValidSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}

handleValidSubmit() {
    if(valid){
        localStorage.setItem("infoID",this.state.infoID);
        this.sendIDToServerAPI(infoID);
       }else {
        localStorage.setItem("infoID",this.state.infoID);
        this.saveNewInfoAPI(info);
      }
    }
 render() {

        return (
            <div }>

                <Container fluid >

                    <Row >
                        <Col  >

                            <AvForm id="avForm" onValidSubmit={this.handleValidSubmit} onInvalidSubmit=}>
                               <Label >Info</Label>
                               <AvField onChange={this.onChange} name="email" placeholder=""Email/>
                              ........
                              .......
                            </AvForm>

                      </Col>

                    </Row>

                </Container>
            </div>
       );
    }

}
 

Я пытался свести к минимуму компоненты, потому что они слишком большие, надеюсь, достаточно ясно, что я пытаюсь сделать. Может кто-нибудь, пожалуйста, помочь мне с решением / идеей? Я попытался погуглить, но не смог найти ничего полезного.

Большое спасибо

Что вы можете сделать, так это сохранить состояние (флаг) что-то вроде submit, которое изначально будет false .

 class Parent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    submit: false
    ....rest of your code
    }
    

  // function to update the submit state
  const setFormSubmit = () => this.setState({submit: true})
}
 

Теперь вы вызываете setFormSubmit при следующем нажатии кнопки
Теперь вы можете передать это состояние (отправить) своему дочернему компоненту.
и всякий раз, когда значение отправки равно true, вы запускаете метод для отправки формы

Вы можете сделать это, используя componentDidUpdate в вашем дочернем компоненте.

   componentDidUpdate(prevProps, prevState) {
  // if prev submit and current submit prop is unequal and the submit is true
  if ((prevProps.submit !== this.props.submit) amp;amp; this.props.submit) {
    // Call method to submit form
  }
}