Question

我在同一组件中有两个类，一个是主类，另一个是模态，我可以将数据从主类传递给模态，但是我想将数据从模态传递给我的班级，但我不知道该怎么办

模式类

class MyVerticallyCenteredModal extends Component {

    constructor(...args) {
      super(...args);
    }

    render() {

      return (
        <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered="true"
          style={{marginTop: '100px'}}
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Ingresar Datos de Direccion
            </Modal.Title>
          </Modal.Header>

          <form className="col-8">
          <Modal.Body>



              {this.props.dataToModal.map(address => (
                   <h3>address.address</h3>
                   <button value="address.id">Use This Address</button>
              ))}

              /* I WANT TO PASS THE OPTION SELECTED TO THE MAIN CLASS*/


          </Modal.Body>

          <Modal.Footer>
          <Col xs={12} md={11}>
            <Button onClick={this.props.onHide}>Close</Button>
          </Col>
          </Modal.Footer>

          </form>
        </Modal>
      );
    }





Main Class

class NewDelivery extends Component {

    constructor(...args) {
    super(...args);

    this.state = {
        data : [],
        modalShow: false,
    }


    (axios request... and store in data variable) 

    render() {

        let modalClose = () => this.setState({ modalShow: false });

        return (

        <React.Fragment>
            <Button
              className="btn btn-success"
              variant="primary"
              onClick={() => this.setState({ modalShow: true })}
            >
                Add Client
            </Button>
            <MyVerticallyCenteredModal
              show={this.state.modalShow}
              onHide={modalClose}
              dataToModal={this.state.data}
            />


           /* I WANT TO SHOW THE OPTION SELECTED*/


        </React.Fragment>

        );
    }

export default NewDelivery;

我可以让客户以我的模式显示，但是我不知道如何将选择显示的地址传递给我的主班。

Answer 1

呈现Main本身的选项，并将其作为子代传递给模态类：

MyVerticallyCenteredModal接受children：

class MyVerticallyCenteredModal extends Component {
  render() {
    return (
      <Modal
      // {...requiredProps}
      >
        <form className="col-8">
          <Modal.Body>{this.props.children}</Modal.Body>
        </form>
      </Modal>
    );
  }
}

NewDelivery将内容作为children传递。

class NewDelivery extends Component {
  render() {
    let modalClose = () => this.setState({ modalShow: false });

    return (
      <React.Fragment>
        <MyVerticallyCenteredModal
          show={this.state.modalShow}
          onHide={modalClose}
          dataToModal={this.state.data}
        >
          {this.state.data.map(address => (
            <>
              <h3>address.address</h3>
              <button value="address.id">Use This Address</button>
            </>
          ))}
        </MyVerticallyCenteredModal>
      </React.Fragment>
    );
  }
}

现在NewDelivery可以完全控制数据了。

如何在React中的类之间传递数据

1 个答案: