web-dev-qa-db-fra.com

Réagir: récupérer la clé enfant dynamique lors d'un événement

Je suis conscient que enfants dynamiques d'un composant doit avoir un key unique comme suit (exemple modifié des documents officiels):

render: function() {
  var results = this.props.results;
  return (
    {results.map(function(result) {
      return <ChildComponent type="text" key={result.id} changeCallback={this.props.callbackFn}/>;
    })}
  );
}

Considérant que ChildComponent est un autre React composant imbriqué ici, avec une méthode render comme ci-dessous)

render: function() {
  var results = this.props.results;
  return (
    <div className="something">
       <input type="text" onChange={this.props.changeCallback} />
    </div>
  );
}

existe-t-il un moyen d'accéder à la touche lorsque callbackFn(event) est appelée?

javascriptreactjs
23
Yan Foto

Appliquez partiellement la fonction de rappel en utilisant le langage natif de JavaScript bind . Ceci est mentionné dans le document " Communicate Between Components " de React:

callbackFn: function(key) {
  // key is "result.id"
  this.props.callbackFn(key);
},
render: function() {
  var results = this.props.results;
  return (
    <div>
      {results.map(function(result) {
        return (
          <ChildComponent type="text" key={result.id}
            changeCallback={this.callbackFn.bind(this, result.id)} />
        );
      }, this)}
    </div>
  );
}
21
Ross Allen

Bien que la première réponse soit correcte, cela est considéré comme une mauvaise pratique car:

Un appel d'appel ou une fonction de flèche dans un accessoire JSX créera une nouvelle fonction sur chaque rendu. Cela est mauvais pour les performances, car cela entraînera l'appel du garbage collector bien plus que nécessaire.

Meilleure façon:

var List = React.createClass({
  handleClick (id) {
    console.log('yaaay the item key was: ', id)
  }

  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={this.handleClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    return (
      <li onClick={this._onClick}>
        ...
      </li>
    );
  },
  _onClick() {
    this.props.onItemClick(this.props.item.id);
  }
});

Source: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

34
barczag