Question

我有一个表格。我必须实现两个提交按钮（添加和提交）。首先，我提交添加按钮，我可以获取数据。这些数据显示在UI中，其次我想通过使用数据库内部的第二个提交按钮传递这些数据。

现在我从我那里得到什么？当我提交添加按钮时，我可以在UI中显示数据，但是当我在数据库中提交相同的数据时，我将从表单中获取新数据。我想在数据库中提交现有数据。

如何在数据库内部传递现有数据？

   class StoreRequistion extends Component {
    constructor(props) {
    super(props);
     this.state = {
      section:'',
      lists:[]
    };
  }

  onSubmit = value => {
    value.preventDefault();
    const existingdata = {
      section:this.state.section,
      lists:this.state.lists
    };
    this.setState({
        status:this.state.section,
        lists:this.state.lists.concat(existingdata)
    });

    if(window.confirm("DO you ageree"))
  {
   this.props.storeAddRequistionActions(existingdata)

  }    
  };

   onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
   };
  render() {
    return (
      <div className="animated fadeIn">
        <div className="store_regiuistion">
         <Card>

            <CardBody>
              <div className="meal-requision-form">
                <form onSubmit={e => this.onSubmit(e)}>

                  <Col xs="6" sm="6" md="6" lg="6" xl="6">
                    <MDBInput
                        label="Section Name"
                        group
                        type="text"
                        name="section"
                        id="section"
                        validate
                        error="wrong"
                        success="right"
                        value={this.state.section}
                        onChange={this.onChange}
                      />                     
                    </Col>


                  <Row className="float-right">
                  <button type="add" className="btn btn-primary foodBtn_Greeen" >
                      Add

                      <i class="fas fa-plus" />

                    </button>

              <button type="submit" onClick={()=>(  
            this.props.storeSubmitRequistionActions(this.state.lists))} 
            class="btn btn-primary foodBtn"  >                
            Submit
                      <i class="fas fa-check" />
                    </button>
                  </Row>
                </form>
              </div>
            </CardBody>
        </Card>
        </div>
        <StoreTable lists={this.state.lists} icon={this.state.icon} toggle={this.state.toggle} collapse={this.state.collapse}/>
      </div>
    );
  }
}

// export default Forms;
const mapStateToProps = state => ({
  storerequistion: state.storerequistion,
});

export default connect(
  mapStateToProps,
  { storeAddRequistionActions,storeSubmitRequistionActions, loginUser }
)(StoreRequistion);

如何在单个组件内实现两个提交按钮

0 个答案: