console.log在箭头功能中不起作用

Question

我已经在react组件内部声明了一个箭头函数。在这个里面我记录了一个值，但显示错误。我的反应是新手，请帮帮我。

我在其中声明了功能的地方

class DeliveryPage extends Component{
   onChange : (event) => { console.log('change', event.target.value); }
}

我在这里调用了函数

  <ComboBox
    data={source}
    onChange={this.onChange}
    onFilterChange={this.onFilterChange}
    filterable={true}
  />

然后我将代码更改为

    onChange = (event) => { console.log('change', event.target.value); }

Answer 1

onChange : (event) => { console.log('change', event.target.value); }

这是不正确的语法，应该是：

onChange = (event) => { console.log('change', event.target.value); }

---

如果箭头功能不起作用，则很可能没有 proposal-class-properties 功能，该功能可以通过以下Babel插件安装：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

否则，请尝试与此类似的方法：

class DeliveryPage extends Component{
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    console.log('change', event.target.value);
  }
}

Answer 2

您应该尝试

class DeliveryPage extends Component{
   onChange = (event) => {
     console.log('change', event.target.value);
  }
}