使用父按鈕 React 從子觸發表單提交

Question

我正在嘗試通過放置在父組件中的按鈕從子組件提交表單。 父級是具有下一個按鈕的幻燈片，我在幻燈片的一頁中顯示我的子組件。

我想要做的是：當我按下父級的下一個按鈕時，我必須將 go 到下一張幻燈片並提交表單子級。

代碼：父組件：

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

}

我試圖最小化這些組件，因為它們太大了，我希望我嘗試做的事情足夠清楚。 誰能幫我一個解決方案/想法？ 我試圖谷歌它，但找不到任何有用的東西。

非常感謝

Answer 1

你可以做的是保持一個狀態（一個標志），比如提交，它最初是錯誤的。

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現在您可以將此狀態（提交）傳遞給您的子組件。 並且只要提交為真，您將觸發提交表單的方法

您可以通過在子組件中使用 componentDidUpdate 來做到這一點。

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