如何在React JS中将视图从子组件传递给父组件？

Question

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

在模态窗口中提交提交时，我应该能够将视图从Child传递给Parent（即从Modal传递到Container），将Container中的表视图替换为从Modal（子）传递的视图。截至目前，仅打印子级中的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（）。通过登录控制台可以轻松实现这一点。