RactJS: Дочерний-родительский компонент связи - PullRequest
Новая
       5

RactJS: Дочерний-родительский компонент связи

0 голосов
/ 01 июля 2019

У меня есть дочерний компонент - 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 и передает значение массива 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 - Parent roomIdNo: [] пуст, потому что selectedRoom тоже пуст, я верю.Как только я что-то наберу в форме в ExportModal.js, журнал консоли выводит состояние roomIdNo пусто

...