将值从一个组件传递到另一个组件

Question

我正在努力将两个值从一个组件传递到ReactJs中的另一个组件。我一直想从另一个组件中获取一些值，并与其他组件中的值合并，然后将合并请求发送到firebase。

下面是组件形式之一的一部分，我需要两个值itemID和restID。

</div>
          {
            contentMenuKeys.map(t=>{
              // if (t === this.state.Appetizer)

              return(
                <div className="text-center">
                  <h4>{t}</h4>

                  <div className="row">
                    {Object.keys(this.props.menu[t]).map(menu=>{
                      return(

                      [this.props.menu[t][menu]].map(item=>{
                        return(
                          <div className="col-md-6 menuItems" >
                            <div className="textM d-flex">
                              <div className="one-half">
                                <h3>{item.Name}</h3>
                                <p><span>{item.Description}</span></p>

                              </div>
                              <div className="one-forth">
                                <span className="price">${item.Price}</span>
                                <p><span>
                                  <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#MenuEditModal">Edit</button ><MenuEditForm itemID={menu},restID={queryString.parse(this.props.location.search).id/>{"   "}
                                  <button  type="submit" onClick={()=>{this.props.deleteMenu({rID:queryString.parse(this.props.location.search).id,Menu_Type:t,iID:menu})}} className="btn btn-danger ml-2">Remove</button>
                                </span></p>
                              </div>
                            </div>
                          </div>
                        )
                      })
                    )
                    })
                  }
                </div>
              </div>
              )              
            }

，此组件具有以下形式。因此，我应该合并输入表单和其他组件中的值，并将其发送到firebase，

export class MenuEditForm extends Component {
    state={
        Name:"",
        Description: "",
        Price:"",
        Menu_Type:"",
        rID:"",
        iID:""
    }

    static propTypes={
        editMenu: propTypes.func.isRequired

    }


    onChange=e=> this.setState({[e.target.restID]:e.target.value},{[e.target.itemID]:e.target.value});

    onSubmit=e=>{

        e.preventDefault();

        const { Name, Description, Price, Menu_Type, rID, iID } = this.state;
        const menu = { Name, Description, Price, Menu_Type,rID,iID}

        this.props.editMenu(menu);
        this.setState({
            Name:"",
            Description: "",
            Price:"",
            Menu_Type:"",
        });

    }
    componentDidMount(){
        this.setState({rID:this.props.restID,iID:this.props.itemID})
      }

    render(){
        const {Name, Description, Price, Menu_Type}=this.state;
        return(

            <div>





            <form onSubmit={this.onSubmit}>
            <div className="modal fade" id="MenuEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalLabel">Edit Items</h5>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>

                    <div>
                        <div className="modal-body">
                        <div className="ml-4 mr-4 mt-4 mb-4">


                                <div className="form-group">
                                <label>Menu_Type</label>
                                <select name="Item Type" id="Item-Type" value={Menu_Type} onChange={this.onChange} name="Menu_Type">
                                <option value="None">None</option>
                                <option value="Appetizers">Appetizers</option>
                                <option value="Entrees">Entrees</option>

                                </select>
                                </div>

                                <div className="form-group">
                                <label>Name</label>
                                <input
                                className="form-control"
                                type="text"
                                name="Name"
                                onChange={this.onChange}
                                value={Name}
                                required
                                />
                                </div>

                                <div className="form-group">
                                <label>Description</label>
                                <input
                                className="form-control"
                                type="text"
                                name="Description"
                                onChange={this.onChange}
                                value={Description}
                                required
                                />
                                </div>

                                <div className="form-group">
                                <label>Price</label>
                                <input
                                className="form-control"
                                type="text"
                                name="Price"
                                onChange={this.onChange}
                                value={Price}
                                required
                                />
                                </div>
                        </div>

                        <div className="modal-footer">
                            <button type="button" id="cancel" className="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" className="btn btn-primary" >Change Items</button>
                        </div>


                        </div>

                     </div>
                     </div>
                </div>
            </div>
            </div>

            </form>


            </div>
        )
    }






}
export default connect(null,{editMenu})(MenuEditForm)