javascript - console.log not working in arrow function - Stack Overflow

admin管理员组

文章数量:1434916

I have declared a arrow function inside react ponent. inside this i have logged a value but it shows error. I am new in react so please help me out.

Where I have declared the function

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

I have invoked the function here

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

Then i have changed my code to

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

I have declared a arrow function inside react ponent. inside this i have logged a value but it shows error. I am new in react so please help me out.

Where I have declared the function

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

I have invoked the function here

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

Then i have changed my code to

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

• javascript
• reactjs
• arrow-functions

Share Improve this question Follow edited May 5, 2019 at 7:43 Tanveer Hasan asked May 5, 2019 at 7:34 Tanveer HasanTanveer Hasan 34311 gold badge55 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

This is incorrect syntax, it should be:

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

---

If the Arrow Functions don't work, then you most likely don't have the proposal-class-properties functionally, which can be installed via the following Babel Plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties.

Otherwise, try this method similar to this:

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

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

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

You should be trying this

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

本文标签： javascriptconsolelog not working in arrow functionStack Overflow