BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり

2022-01-27 03:29:05

質問

onsenuiとreactを使ってリストを作っています。 しかし、onchangedからbindを呼び出すことができません。

わからなくなってしまいました...。誰かこれを解決できる人はいますか？

これは私のコードです。 入力項目からhandlechangedメソッドを呼び出したいのです。 しかし、Cannot read property 'bind' of 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>
    );
  }
}

解決方法は？

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します