将函数作为道具传递，未定义的错误

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