我正在尝试使用rowEvents来触发react-bootstrap-table-2中的操作，但是onClick中的'this‘是未定义的。有什么想法吗？

Question

下面是代码块：

const expandRow = {
    renderer: row => (
        <div>
            <BootstrapTable
                keyField='id'
                data={ row.data }
                columns={ columns1 }
            />
        </div>
    )
};

export default class MyPage extends Component {
    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        this.props.actions.fetchData().  // fetches in this.props.data
    }

    rowEvents = {
        onClick: (e, row, rowIndex) => {
            this.props.actions.fetchHistory(row.Id).   /* this is undefined */
        }
    }

    render() {

        return (
            <BootstrapTable
                keyField='Id'
                data={ this.props.data }
                columns={ columns }
                striped
                rowEvents={ this.rowEvents }
                expandRow={ expandRow }
            />
        )
    }
}

我正在尝试做的是，对于每一行点击，我想通过触发一个动作来获取数据。我可能错误地理解了这里“this”的上下文。有什么想法吗？

Answer 1

我找到了一种解决“this”上下文问题的方法。以一种稍微不同的方式实现rowEvents，如下所示。我仍然不太确定为什么我会遇到这样的上下文问题。

let rowEvents = () => {
    return{
    onClick: rowOnClick
    }
}
async function rowOnClick(e, row, rowIndex) {
    await this.props.actions.fetchLogHistory(row.orchestratorId)
}

and bind rowOnClick to this in the constructor:
this.rowOnClick = this.rowOnClick.bind(this)

然而，尽管我使用async/await来触发该操作，但我遇到了另一个问题，在该操作之前加载的扩展行(内部)引导数据库表被缩减，并且它在props中没有数据。我现在尝试的是使用另一个在展开行中呈现的Component，在其中，我将使用内部引导表，它的componenDidMount将获取数据。

Answer 2

rowEvents不是一个函数，而是一个常量，请尝试用const定义它

const rowEvents = {
        onClick: (e, row, rowIndex) => {
            this.props.actions.fetchHistory(row.Id).   /* this is undefined */
        }
    }