Question

128

Cannot read property 'bind' of undefined. React.js

rated 0 times [ 135] [ 7] / answers: 1 / hits: 117169 / 8 Years ago, thu, september 22, 2016, 12:00:00

I'm making list using onsenui and react.
but I cannot call a bind from onchanged.

I couldn't figure out.... Does anyone can solve this?

this is my code.
I'd like to call handlechanged method from input item.
But then, Cannot read property 'bind' of undefined is raised.

export default class MainPage extends React.Component {





  constructor(props) {

      super(props);

      this.state = {

        selectedValue: myself,

        destinations: [myself,somebody],

      };

  }





  handleChange(value) {

    this.setState({selectedValue: value});

  }



  renderRadioRow(row) {

    return (

      <ListItem key={row} tappable>

        <label className='left'>

          <Input

            inputId={`radio-${row}`}

            checked={row === this.selectedValue}

            onChange={this.handleChange.bind(this, row)}

            type='radio'

          />

        </label>

        <label htmlFor={`radio-${row}`} className='center'>

          {row}

        </label>

      </ListItem>

    )

  }



  render() {

    return (

      <Page renderToolbar={this.renderToolbar}>

        <p style={{textAlign: 'center'}}>

          test

        </p>



        <List

          dataSource={this.state.destinations}

          renderRow={this.renderRadioRow}

        />

      </Page>

    );

  }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

louiseb

Add To Favorites

Follow

Total Points: 368

Total Questions: 107

Total Answers: 107

Location: Tanzania

Member since Wed, Feb 24, 2021

3 Years ago

answered 8 Years ago madelyn · Accepted Answer

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

No Autobinding

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>:

You can use bind() to preserve this

<div onClick={this.tick.bind(this)}>

Or you can use arrow functions

<div onClick={() => this.tick()}>

We recommend that you bind your event handlers in the constructor so they are only bound once for every instance:

constructor(props) {

  super(props);

  this.state = {count: props.initialCount};

  this.tick = this.tick.bind(this);

}

Now you can use this.tick directly as it was bound once in the constructor:

It is already bound in the constructor

<div onClick={this.tick}>

This is better for performance of your application, especially if you implement shouldComponentUpdate() with a shallow comparison in the child components.

export default class MainPage extends React.Component {





  constructor(props) {

      super(props);

      this.state = {

        selectedValue: myself,

        destinations: [myself,somebody],

      };

      this.renderRadioRow = this.renderRadioRow.bind(this);

  }





  handleChange(value) {

    this.setState({selectedValue: value});

  }



  renderRadioRow(row) {

    return (

      <ListItem key={row} tappable>

        <label className='left'>

          <Input

            inputId={`radio-${row}`}

            checked={row === this.selectedValue}

            onChange={() => {

              this.handleChange(row);

            }

            type='radio'

          />

        </label>

        <label htmlFor={`radio-${row}`} className='center'>

          {row}

        </label>

      </ListItem>

    )

  }



  render() {

    return (

      <Page renderToolbar={this.renderToolbar}>

        <p style={{textAlign: 'center'}}>

          test

        </p>



        <List

          dataSource={this.state.destinations}

          renderRow={this.renderRadioRow}

        />

      </Page>

    );

  }

}