如何将视图从子部分传递到React Js中的父

Question

我有一个父组件（容器），其中正在在表中显示产品，单击标头单元时，正在调用一个模态窗口，这是子组件。

在模态窗口中提交时，我应该能够将视图从子送到父（即从模态到容器），请用模态（孩子）传递的视图替换容器中的表视图。截至目前，只有打印儿童中的Console.log，但结果尚未得到渲染。我不确定如何从孩子那里转到父母。任何人都可以帮我吗？

这是代码 -

容器（父）：

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

Answer 1

我想如果正确设置了FilterRedData，并且随后渲染了FullList（）。登录控制台可以很容易地可以。