Как передать представление от дочернего компонента к родительскому в React JS? - PullRequest
Новая
       36

Как передать представление от дочернего компонента к родительскому в React JS?

0 голосов
/ 20 февраля 2019

У меня есть родительский компонент (контейнер), в котором отображаются продукты в таблице, при щелчке по ячейкам заголовка я вызываю модальное окно, являющееся дочерним компонентом.

При клике, отправляемом в модальное окно, ядолжна иметь возможность передавать представление от дочернего к родительскому (то есть от модального к контейнеру), заменить табличное представление в контейнере на представление, переданное из модального (дочернего).На данный момент печатается только файл console.log в child, но результат не отображается.Я не уверен, как передать представление от ребенка, обратно к родителю.Может ли кто-нибудь помочь мне, пожалуйста.

Вот код -

Контейнер (родительский): 

render(){
        ......
        return (
            <div>
                <Button onClick={this.onButtonClick} text="Compare" 
                isDisabled={this.state.isDisabled} style={btnstyle}/> 
                <Button onClick={this.onClearClick} text="Clear" />
                <br />
                <br />
                //The below line is the actual view. I need to replace this view with the view that is passed from Modal
                {!this.state.activeFilter ? this.fullList() : this.compareView()}
                <br />
                <MyModal show={this.state.show} handleClose={this.handleClose}
                 body={this.state.checkboxInputValue==="Part Number" ? allPartNumbers : allProductLines} 
                 title={this.state.checkboxInputValue} submit={this.onButtonClick}/>
            </div>
        );
    }

Модальный (дочерний): 

//The view returned in this method should be passed to Parent(Container) and displayed there
onSubmit = (event) => {
    //this.props.handleClose
    //event.preventDefault();
    this.setState({ selected: [] });
    this.props.handleClose();
    const data = this.state.data;
    const selectedData = this.state.selected;
    console.log("selectedData -- "+selectedData)

    let filterredData = data.filter(row =>
        selectedData.includes(row.PartNumber)
    );
    this.setState({ data: filterredData });

    const filteredPartNumbers = this.state.data.map(partnumbers =>partnumbers.PartNumber);
    const filteredProductLines = this.state.data.map(productlines =>productlines.productline);
    const filteredProductImages = this.state.data.map(productimages =>productimages.url);

    return (

        <div>
            <table id="compare-results-table" className="table vertical table-bordered">
                <tbody>
                    <tr>
                        <th>Part Number</th>
                        {filteredPartNumbers.map(k => <td key={k}>{k}</td>)}
                    </tr>
                    <tr>
                        <th>Product Line</th>
                        {filteredProductLines.map(k => <td key={k}>{k}</td>)}
                    </tr>
                    <tr>
                        <th>Product Image</th>
                        {filteredProductImages.map(k => <td key={k}><Image src={k} /></td>)}
                    </tr>
                </tbody>
            </table>
        </div>
    )
};

render(){
   // console.log("inmodal =="+this.props.allPartNumbers)
    return(
        <Modal show={this.props.show} onHide={this.props.handleClose}>
            .....
            <Modal.Footer>
                <button variant="secondary" onClick={this.onSubmit.bind(this)} >Submit</button>
                .....
            </Modal.Footer>
        </Modal>
    )
}`enter code here`

Полный код здесь - https://codesandbox.io/s/my3x6zoz6y

1 Ответ

0 голосов
/ 20 февраля 2019

Полагаю, вам стоит посмотреть, правильно ли настроен filterredData и впоследствии отображается fullList ().Это легко сделать, войдя в консоль.

...