Question

我有一个子级组件-ExportModalMultiRoom.js，用户可以在其中选择多个房间。这保存在数组-selectedRooms中，我需要将其发送给Parent-ExportModal.js和setState为roomIdNo: []，其值为selectedRooms。到目前为止，我已经尝试通过道具将函数传递给孩子。


Parent - `ExportModal.js`

export default class ExportModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            roomIdNo: [],

        };
        this.setStateFromChild = this.setStateFromChild.bind(this);
    }


setStateFromChild(selectedRooms){
        this.setState({roomIdNo: selectedRooms});
    }

  render() {
     return() {
    <ExportReportRoomSelectionModal setStateFromChild={this.setStateFromChild}/>
  }
}

然后，子级调用submitProps函数，并将父级应该将setState的selectedRooms数组的值传递给roomId。


Child - ` ExportModalMultiRoom `

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);


        this.state = {
            rooms: roomOrder,
            selectedRooms: []
        };

        this.onSelectRooms = this.onSelectRooms.bind(this);
        this.submitProps = this.submitProps.bind(this);
    }


   submitProps(e){
        e.preventDefault();

        const { selectedRooms } = this.state; 
        const { setStateFromChild } = this.props;

        setStateFromChild(selectedRooms);
    }

render() {
     return() {

           <form>
                <Modal>
                        <Modal.Title>Print PDF</Modal.Title>
                    =
                    <Modal.Body>
                        <p>Please selected the rooms</p>

                        <Grid> 
                            <Row className="show-grid">
                                { this.state.rooms.map((roomName, i ) => 

                                    <Col key={i}>
                                        <Panel}>  
                                            <Panel.Heading onClick={this.onSelectRooms} id={roomName}> 
                                                {roomName}                               
                                            </Panel.Heading>
                                        </Panel> 
                                    </Col>
                                )}
                            </Row>
                        </Grid>

                    </Modal.Body>
                    <Modal.Footer>
                        <Button
                            onClick={this.props.handleHide}
                            data-toggle="modal"
                            data-target="#export-modal"
                            onSubmit={this.submitProps}
                        >
                            Send PDF
                        </Button>
                        <Button onClick={this.props.handleHide}>Close</Button>
                    </Modal.Footer>

                </Modal>
            </form>
    }
}

问题在ExportModal中-父roomIdNo: []为空，因为我相信selectedRoom也为空。在ExportModal.js中的表单上键入内容后，控制台日志将显示roomIdNo状态为空

RactJS：子组件到父组件的通信

0 个答案: