クラス外の小道具にアクセス

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

私はエラーUncaught TypeError: Cannot read property 'props' of undefinedコードを実行します。私が考えているのはpropsはclass Featureの外では利用できません。私はonAfterSaveCellファンクションでcellEditPropに移動しようとしましたが、class Featureにコンパイルエラーが発生します。 propsをclass Featureの外部からアクセスできるようにするにはどうすればよいですか、これは他の方法で解決する必要がありますか？

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