Доступ к реквизитам наружного класса

Question

Я использую react-bootstrap-table с включенным 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>...... 

При запуске кода I произошла ошибка Uncaught TypeError: Cannot read property 'props' of undefined. Который, я думаю, из-за этого props не доступен за пределами class Feature. Я попытался переместить функцию onAfterSaveCell и cellEditProp в class Feature, но это дает мне ошибку компиляции. Как я могу сделать props доступным за пределами class Feature, или это нужно решить каким-то другим способом?

Answer 1

Вы правы, вы не можете использовать ключевое слово вне класса. Поэтому очевидным ответом является определение вашей функции обратного вызова внутри класса. Я думаю, причина, по которой вы получили ошибку компиляции, связана с синтаксической ошибкой, так как это должно работать нормально:

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>......