Question

我有一个父组件（容器），在其中在表中显示产品，单击标题单元格，然后调用作为子组件的模态窗口。

在Modal窗口中单击提交时，我应该能够将子视图传递给父级（即从Modal传递给Container），将Container中的表视图替换为从Modal（child）传递的视图。截至目前，仅打印child中的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（）。通过登录控制台很容易做到这一点。

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

1 个答案: