时间戳

首页 > 解决方案 > 如何将值从功能子组件传递到类父组件并将值保存到状态？

javascript - 如何将值从功能子组件传递到类父组件并将值保存到状态？

问题描述

我有一个具有功能子表组件的父类组件。当用户在表格组件中选择一行时，我试图捕获该行数据（数据是一个对象），将其返回给父组件，然后将其保存到状态。我目前遇到以下错误：Uncaught TypeError: Cannot read property 'setState' of undefined

我已经引用了这个 Stack 问题，但这不会将子组件中的值保存到父组件中的状态：如何将值从子功能组件传递到父类组件？

问题：如何将值保存到状态？

父类组件

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRows: []
        };
    }

    setSelectedDataTableRow(selectedRow) {
        console.log('setSelectedDataTableRow triggered!', selectedRow);
        this.setState({selectedRows: selectedRow}) //this is causing the error
    }

    render() {
        return (
            <>
                <ChildComponent 
                     otherProps={otherProps} 
                     setSelectedDataTableRow={this.setSelectedDataTableRow} 
                />
            </>
        );
    }
}

子功能组件

const ChildComponent = ({ otherProps, setSelectedDataTableRow }) => {
    const ROWS_PER_PAGE = 5;
    const captureRowData = (data) => {
        setSelectedDataTableRow(data)
    }

    return (
        <div>
            <DataGrid
                //other attributes
                onRowSelected={(e) => captureRowData(e.data)}
            />
        </div>
    );
};

标签： javascriptreactjssetstate

解决方案

Dave 在评论中提供的解决方案起到了作用。在这里发布它作为答案：

setSelectedDataTableRow={this.setSelectedDataTableRow}

更新为

setSelectedDataTableRow={this.setSelectedDataTableRow.bind(this)}

推荐阅读