传递函数作为prop，未定义的错误

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>
    );
  }
}

继续得到这个.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>
        );
    }
}