Nie można odczytać właściwości "bind" niezdefiniowanej. React.js

Question

Robię listę używając onsenui i reaguję. , ale nie mogę wywołać powiązania z numeru bieżącego.

Nie mogłem wymyślić .... Czy ktoś może rozwiązać ten problem?

To jest mój kod. Chciałbym wywołać metodę handleechanged z elementu wejściowego. Ale wtedy nie można odczytać właściwości "bind" niezdefiniowanego jest podniesiona.

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

Nie autobindingu

Metod podążać tą samą semantykę jak regularne zajęcia ES6, co oznacza, że ​​nie wiąże się to automatycznie na przykład. Musisz jawnie użyć .bind(this) lub strzałek funkcji =>:

Można użyć bind(), aby zachować this

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

Albo można użyć funkcji strzałek

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

Zaleca się wiązać twoje programy obsługi zdarzeń w konstruktorze, więc są związane tylko raz dla każdego wystąpienia:

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

Teraz można użyć this.tick bezpośrednio, jak został on zobowiązany raz w konstruktorze:

jest już związana w konstruktorze

<div onClick={this.tick}>

To jest lepsze dla wykonywania aplikacji, zwłaszcza jeśli implementuj metodę shouldComponentUpdate() z płytkim porównaniem w komponentach potomnych.

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

nie wiem jakie wartości są przekazywane w rzędzie, ale trzeba przekazać kontekst renderowania w celu wywołania tej funkcji i wiązania.

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