関数を小道具として渡します。定義されていないエラー

Question

子供のコンポーネントに小道具を渡そうとしています。

onChangeNumber: e => { 
    console.log(e); 
}; 

class MyDrinking extends React.Component { 
    render() { 
    return (
     <Flexible> 
     <LYDSlider 
      {...sceneConfig} 
      onChangeNumber={this.onChangeNumber.bind(this)} 
      value={sceneConfig.sliderNumberValue} 
     /> 
     </Flexible> 
    ); 
    } 
} 

続きを読むthis.props.onChangeNumberは機能ではありません。

アイデア？

Answer 1

この関数はクラス内のプロパティとして定義されていないためです。

class MyDrinking extends React.Component { 
    constructor() { 
     super(); 
     this.onChangeNumber = this.onChangeNumber.bind(this); 
    } 
    onChangeNumber(e) { 
     console.log(e); 
    } 
    render() { 
     return (
      <Flexible> 
       <LYDSlider 
       {...sceneConfig} 
       onChangeNumber={this.onChangeNumber} 
       value={sceneConfig.sliderNumberValue} 
       /> 
      </Flexible> 
     ); 
    } 
}