未定義のプロパティ 'bind'を読み取ることができません。 React.js

Question

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

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

これは私のコードです。 私はhandlechangedメソッドを入力項目から呼び出したいと思います。 しかし、undefinedのプロパティ 'bind'を読み込めません。

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クラスと同じセマンティクスに従ってください。あなたは明示的に私たちはあなたが結合することをお勧めします

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

をあなたはthis

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

を維持するためにバインド（）を使用するかは

矢印の機能を使用することができます .bind(this)または矢印機能 =>:

を使用する必要がありますコンストラクタ内のイベントハンドラはすべてのインスタンスに対して一度だけバインドされます。

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

Answer 2

私は、行に渡された値が分からいけない、しかし、あなたはその機能とバインドを呼び出すためにレンダリングコンテキストを渡す必要があります。

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