Question

我使用启用了react-bootstrap-table的{{1}}。在编辑单元格后，可以在cellEdit中使用回调函数。我已将回调函数react-bootstrap-table命名为。表中更新的行将保存到名为onAfterSaveCell的变量中。我想将row发送给名为row的动作创建者，该动作创建者接受pushData作为输入。我的代码看起来像这样。

row

当我运行代码时，错误function onAfterSaveCell(row, cellName, cellValue){ this.props.pushData(row); } const cellEditProp = { mode: "click", blurToSave: true, afterSaveCell: onAfterSaveCell }; class Feature extends Component { componentWillMount() { this.props.fetchMessage(); } render() { if (!this.props.message) return null return ( <div> <BootstrapTable data={this.props.message} cellEdit={cellEditProp} > <TableHeaderColumn dataField="ccyCode" isKey={true} dataSort={true}>Valutakod</TableHeaderColumn>......。我认为这是Uncaught TypeError: Cannot read property 'props' of undefined在props之外无法使用的原因。我已尝试将class Feature函数和onAfterSaveCell移入cellEditProp但这会给我一个编译错误。如何在class Feature之外访问props，还是应该以其他方式解决？

Answer 1

你说得对，你不能在课堂外使用this关键字。所以明显的答案是在类中定义你的回调函数。我认为你得到编译错误的原因是由于语法错误，因为这应该可以正常工作：

class Feature extends Component {
  constructor(props, context) {
    super(props, context);
    this.onAfterSaveCell = this.onAfterSaveCell.bind(this); // important!
  }

  componentWillMount() {
    this.props.fetchMessage();
  }

  onAfterSaveCell(row, cellName, cellValue) {
    this.props.pushData(row);
  }



  render() {
    if (!this.props.message) return null

    return (
    <div>
      <BootstrapTable
              data={this.props.message}
              cellEdit={{
                mode: "click",
                blurToSave: true,
                afterSaveCell: this.onAfterSaveCell
                }}
              >
        <TableHeaderColumn dataField="ccyCode" isKey={true} dataSort={true}>Valutakod</TableHeaderColumn>......

在课堂外访问道具

1 个答案: