无法读取undefined的属性'bind'.React.js

Question

我正在使用onsenui制作列表并做出反应.但我无法通过onchanged调用绑定.

我想不出来......有人能解决这个问题吗？

这是我的代码.我想从输入项调用handlechanged方法.但是,然后,无法读取属性'bind'的undefined被提出.

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

Answer 1

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

没有自动绑定

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

您可以使用bind()来保存 this

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

或者您可以使用箭头功能

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

我们建议您在构造函数中绑定事件处理程序,以便它们仅针对每个实例绑定一次:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}

现在你可以this.tick直接使用它在构造函数中绑定一次:

它已经绑定在构造函数中

<div onClick={this.tick}>

这对于应用程序的性能更好,尤其是在子组件中使用浅比较实现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>
    );
  }
}