web-dev-qa-db-ja.com

未定義のプロパティ「バインド」を読み取ることができません。 React.js

Onsenuiを使用してリストを作成し、反応します。しかし、onchangedからバインドを呼び出すことはできません。

私は理解できませんでした....誰もこれを解決できますか？

これは私のコードです。入力項目から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>
    );
  }
}
javascriptreactjsecmascript-6monaca
14
Masaru Iwasa

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

コンストラクターでイベントハンドラーをバインドして、インスタンスごとに1回だけバインドされることをお勧めします。

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

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>
        );
    }
}
0
Vishnu Shekhawat