console.log 在箭头函数中不起作用

Question

我在 React 组件中声明了一个箭头函数。在这里面我记录了一个值但它显示错误。我是 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);
  }
}

console.log 在箭头函数中不起作用

console.log not working in arrow function

javascript

reactjs

arrow-functions