Javascript 无法读取未定义的属性“绑定”。React.js

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

提问by Masaru Iwasa

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

我正在使用 onsenui 制作清单并做出反应。但我不能从 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.

这是我的代码。我想从输入项调用 handlechanged 方法。但是，无法读取未定义的属性“绑定”被引发。

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

回答by Lottamus

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

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 =>:

方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用.bind(this)或箭头函数=>:

You can use bind() to preserve this

您可以使用 bind() 来保存 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.tickdirectly as it was bound once in the constructor:

现在您可以this.tick直接使用，因为它在构造函数中绑定过一次：

It is already bound in the constructor

它已经绑定在构造函数中

<div onClick={this.tick}>

<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.

这对您的应用程序的性能更好，特别是如果您在子组件中使用浅比较来实现 shouldComponentUpdate()。

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

回答by Vishnu Shekhawat

I dont know what value is passed in row , but you need to pass the render context in order to call that function and bind.

我不知道 row 中传递了什么值，但是您需要传递渲染上下文才能调用该函数并绑定。

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,renderContext) {
        return (
            <ListItem key={row} tappable>
                <label className='left'>
                    <Input
                        inputId={`radio-${row}`}
                        checked={row === this.selectedValue}
                        onChange={this.handleChange.bind(renderContext, row)}
                        type='radio'
                    />
                </label>
                <label htmlFor={`radio-${row}`} className='center'>
                    {row}
                </label>
            </ListItem>
        )
    }

    render() {
        var renderContext=this;
        return (
            <Page renderToolbar={this.renderToolbar}>
                <p style={{textAlign: 'center'}}>
                    test
                </p>

                <List
                    dataSource={this.state.destinations}
                    renderRow={() => this.renderRadioRow(row,renderContext)}
                />
            </Page>
        );
    }
}