web-dev-qa-db-fra.com

Impossible de lire la propriété 'bind' de non définie. React.js

Je fais la liste en utilisant onsenui et réagis. mais je ne peux pas appeler un lien de onchanged.

Je n'arrivais pas à comprendre ... Quelqu'un peut-il résoudre ce problème?

c'est mon code. Je voudrais appeler la méthode handlechanged de l'élément d'entrée. Mais alors, Impossible de lire la propriété 'bind' of indéfinie est levée.

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

Pas de liaison automatique

Les méthodes suivent la même sémantique que les classes ES6 classiques, ce qui signifie qu'elles ne la lient pas automatiquement à l'instance. Vous devrez utiliser explicitement .bind(this) ou les fonctions de flèche =>:

Vous pouvez utiliser bind () pour préserver this

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

Ou vous pouvez utiliser les fonctions de flèche

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

Nous vous recommandons de lier vos gestionnaires d'événements au constructeur afin qu'ils ne soient liés qu'une seule fois pour chaque instance:

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

Maintenant, vous pouvez utiliser this.tick directement comme il était lié une fois dans le constructeur:

Il est déjà lié dans le constructeur

<div onClick={this.tick}>

Cela améliore les performances de votre application, en particulier si vous implémentez shouldComponentUpdate () avec une comparaison superficielle dans les composants enfants.

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

Je ne sais pas quelle valeur est passée en ligne, mais vous devez passer le contexte de rendu afin d'appeler cette fonction et de la lier.

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