React js onClick ne peut pas transmettre de valeur à la méthode

Je souhaite lire les propriétés de la valeur de l'événement onClick. Mais quand je clique dessus, je vois quelque chose comme ça sur la console:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

Mon code fonctionne correctement. Quand je cours, je peux voir {column}mais je ne peux pas l'obtenir dans l'événement onClick.

Mon code:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

Comment puis-je transmettre une valeur à l' onClickévénement dans React js?

Moyen facile

Utilisez une fonction de flèche:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

Cela créera une nouvelle fonction qui appelle handleSortavec les bons paramètres.

Meilleure façon

Extrayez-le dans un sous-composant. Le problème avec l'utilisation d'une fonction fléchée dans l'appel de rendu est qu'il créera une nouvelle fonction à chaque fois, ce qui finira par provoquer des restitutions inutiles.

Si vous créez un sous-composant, vous pouvez passer le gestionnaire et utiliser les accessoires comme arguments, qui ne seront ensuite restitués que lorsque les accessoires changent (car la référence du gestionnaire ne change plus):

Sous-composant

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

Composant principal

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

Old Easy Way (ES5)

Utilisez .bindpour passer le paramètre souhaité:

return (
  <th value={column} onClick={that.handleSort.bind(that, column)}>{column}</th>
);

Il y a de bonnes réponses ici, et je suis d'accord avec @Austin Greco (la deuxième option avec des composants séparés)
Il y a une autre façon que j'aime, le curry .
Ce que vous pouvez faire est de créer une fonction qui accepte un paramètre (votre paramètre) et renvoie une autre fonction qui accepte un autre paramètre (l'événement click dans ce cas). alors vous êtes libre d'en faire ce que vous voulez.

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

Et vous l'utiliserez de cette façon:

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

Voici un exemple complet d'une telle utilisation:

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Notez que cette approche ne résout pas la création d'une nouvelle instance sur chaque rendu.
J'aime cette approche par rapport aux autres gestionnaires en ligne car celle-ci est plus concise et lisible à mon avis.

Modifier:
Comme suggéré dans les commentaires ci-dessous, vous pouvez mettre en cache / mémoriser le résultat de la fonction.

Voici une implémentation naïve:

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

De nos jours, avec ES6, je pense que nous pourrions utiliser une réponse mise à jour.

return (
  <th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);

Fondamentalement, (pour ceux qui ne le savent pas) car onClickattend une fonction qui lui est transmise, bindfonctionne car il crée une copie d'une fonction. Au lieu de cela, nous pouvons passer une expression de fonction de flèche qui appelle simplement la fonction que nous voulons et conserve this. Vous ne devriez jamais avoir besoin de lier la renderméthode dans React, mais si pour une raison quelconque vous perdez thisdans l'une de vos méthodes de composant:

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

[[h / t à @ E.Sundin pour avoir lié ceci dans un commentaire]

La première réponse (fonctions anonymes ou liaison) fonctionnera, mais ce n'est pas la plus performante, car elle crée une copie du gestionnaire d'événements pour chaque instance générée par la map()fonction.

Ceci est une explication de la façon optimale de le faire à partir du plugin ESLint-react :

Listes d'articles

Un cas d'utilisation courant de liaison dans le rendu est lors du rendu d'une liste, pour avoir un rappel séparé par élément de liste:

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

Plutôt que de le faire de cette façon, tirez la section répétée dans son propre composant:

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

Cela accélérera le rendu, car il évite de créer de nouvelles fonctions (via des appels de liaison) à chaque rendu.

Ceci est mon approche, je ne sais pas à quel point c'est mauvais, veuillez commenter

Dans l'élément cliquable

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

et alors

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

cet exemple peut être légèrement différent du vôtre. mais je peux vous assurer que c'est la meilleure solution que vous pouvez avoir pour ce problème. j'ai cherché pendant des jours une solution qui n'a aucun problème de performance. et a finalement trouvé celui-ci.

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

MISE À JOUR

dans le cas où vous souhaitez traiter des objets qui sont censés être les paramètres. vous pouvez l'utiliser JSON.stringify(object)pour le convertir en chaîne et l'ajouter à l'ensemble de données.

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

Une autre option n'impliquant pas .bindou ES6 consiste à utiliser un composant enfant avec un gestionnaire pour appeler le gestionnaire parent avec les accessoires nécessaires. Voici un exemple (et un lien vers un exemple de travail est ci-dessous):

var HeaderRows = React.createClass({
  handleSort:  function(value) {
     console.log(value);
  },
  render: function () {
      var that = this;
      return(
          <tr>
              {this.props.defaultColumns.map(function (column) {
                  return (
                      <TableHeader value={column} onClick={that.handleSort} >
                        {column}
                      </TableHeader>
                  );
              })}
              {this.props.externalColumns.map(function (column) {
                  // Multi dimension array - 0 is column name
                  var externalColumnName = column[0];
                  return ( <th>{externalColumnName}</th>
                  );
              })}
          </tr>);
      )
  }
});

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

L'idée de base est que le composant parent transmette la onClickfonction à un composant enfant. Le composant enfant appelle la onClickfonction et peut accéder à tous ceux qui lui sont propstransmis (et à event), ce qui vous permet d'utiliser n'importe quelle eventvaleur ou d'autres accessoires dans la onClickfonction du parent .

Voici une démonstration de CodePen montrant cette méthode en action.

Faire une autre tentative pour répondre à la question de OP, y compris les appels e.preventDefault ():

Lien rendu ( ES6 )

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

Fonction des composants

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

Je me rends compte que c'est assez tard pour la fête, mais je pense qu'une solution beaucoup plus simple pourrait satisfaire de nombreux cas d'utilisation:

    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    <button
        value={post.id}
        onClick={this.handleEdit} >Edit</button>

Je suppose que vous pouvez également utiliser un data-attribut.

Simple, sémantique.

Créez simplement une fonction comme celle-ci

  function methodName(params) {
    //the thing  you wanna do
  }

et appelez-le à l'endroit dont vous avez besoin

<Icon onClick = {() => {methodName (theParamsYouwantToPass); }} />

Vous pouvez simplement le faire si vous utilisez ES6.

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

L'implémentation affiche le nombre total à partir d'un objet en transmettant le nombre en tant que paramètre du composant principal aux composants secondaires, comme décrit ci-dessous.

Voici MainComponent.js

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      <div className="App">
        {someData.map((nameAndCount, i) => {
          return (
            <SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            />
          );
        })}
        <h1>Total Count: {this.state.total}</h1>
      </div>
    );
  }
}

export default App;

Et voici SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      <div>
        <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
      </div>
    )
  }
};

Essayez d'implémenter ci-dessus et vous obtiendrez un scénario exact indiquant comment les paramètres de passage fonctionnent dans reactjs sur n'importe quelle méthode DOM.

J'ai écrit un composant wrapper qui peut être réutilisé à cet effet qui s'appuie sur les réponses acceptées ici. Si tout ce que vous devez faire est de passer une chaîne, ajoutez simplement un attribut de données et lisez-le depuis e.target.dataset (comme certains l'ont suggéré). Par défaut, mon wrapper se liera à tout accessoire qui est une fonction et commence par «on» et retransmet automatiquement l'accessoire de données à l'appelant après tous les autres arguments d'événement. Bien que je ne l'ai pas testé pour les performances, cela vous donnera l'occasion d'éviter de créer la classe vous-même, et il peut être utilisé comme ceci:

const DataButton = withData('button')
const DataInput = withData('input');

ou pour Composants et fonctions

const DataInput = withData(SomeComponent);

ou si vous préférez

const DataButton = withData(<button/>)

déclarer qu'en dehors de votre conteneur (près de vos importations)

Voici l'utilisation dans un conteneur:

import withData from './withData';
const DataInput = withData('input');

export default class Container extends Component {
    state = {
         data: [
             // ...
         ]
    }

    handleItemChange = (e, data) => {
        // here the data is available 
        // ....
    }

    render () {
        return (
            <div>
                {
                    this.state.data.map((item, index) => (
                        <div key={index}>
                            <DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
                        </div>
                    ))
                }
            </div>
        );
    }
}

Voici le code wrapper 'withData.js:

import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) => {
    Target = React.isValidElement(Target) ? Target.type : Target;
    options = { ...defaultOptions, ...options }

    class WithData extends Component {
        constructor(props, context){
            super(props, context);
            this.handlers = getHandlers(options.events, this);        
        }

        render() {
            const { data, children, ...props } = this.props;
            return <Target {...props} {...this.handlers} >{children}</Target>;
        }

        static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
    }

    return WithData;
}

function getHandlers(events, thisContext) {
    if(!events)
        events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
    else if (typeof events === 'string')
        events = [events];

    return events.reduce((result, eventType) => {
        result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}

J'ai ci-dessous 3 suggestions à ce sujet sur JSX onClick Events -

1. En fait, nous n'avons pas besoin d'utiliser la fonction .bind () ou Arrow dans notre code. Vous pouvez une utilisation simple dans votre code.

2. Vous pouvez également déplacer l'événement onClick de th (ou ul) à tr (ou li) pour améliorer les performances. Fondamentalement, vous aurez n nombre d '"écouteurs d'événements" pour votre élément n li.

   So finally code will look like this:
   <ul onClick={this.onItemClick}>
       {this.props.items.map(item =>
              <li key={item.id} data-itemid={item.id}>
                  ...
              </li>
         )}
   </ul>

   // Et vous pouvez accéder item.idà la onItemClickméthode comme indiqué ci-dessous:

   onItemClick = (event) => {
      console.log(e.target.getAttribute("item.id"));
   }

3. Je suis d'accord avec l'approche mentionnée ci-dessus pour créer un composant React séparé pour ListItem et List. Ce code de rendu semble bon, mais si vous en avez 1000, alors 1000 écouteurs d'événements seront créés. Veuillez vous assurer que vous ne devriez pas avoir beaucoup d'auditeur d'événements.

   import React from "react";
   import ListItem from "./ListItem";
   export default class List extends React.Component {
   
       /**
       * This List react component is generic component which take props as list of items and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = (item) => {
           if (this.props.onItemClick) {
               this.props.onItemClick(item);
           }
       }
   
       /**
       * render method will take list of items as a props and include ListItem component
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <div>
                 {this.props.items.map(item =>
                     <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>
                 )}
               </div>
           );
       }
   
   }
   
   
   import React from "react";
   
   export default class ListItem extends React.Component {
       /**
       * This List react component is generic component which take props as item and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = () => {
           if (this.props.item && this.props.onItemClick) {
               this.props.onItemClick(this.props.item);
           }
       }
       /**
       * render method will take item as a props and print in li
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>
           );
       }
   }

J'ai ajouté du code pour passer la valeur de l'événement onclick à la méthode de deux manières. 1 . en utilisant la méthode bind 2. en utilisant la méthode arrow (=>). voir les méthodes handlesort1 et handlesort

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

Voici l'exemple qui transmet la valeur à l'événement onClick.

J'ai utilisé la syntaxe es6. rappelez-vous que la fonction de flèche du composant de classe ne se lie pas automatiquement, donc la liaison explicitement dans le constructeur.

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

Je suppose que vous devrez lier la méthode à l'instance de classe React. Il est plus sûr d'utiliser un constructeur pour lier toutes les méthodes dans React. Dans votre cas, lorsque vous passez le paramètre à la méthode, le premier paramètre est utilisé pour lier le contexte «this» de la méthode, vous ne pouvez donc pas accéder à la valeur à l'intérieur de la méthode.

1. You just have to use an arrow function in the Onclick event like this: 

<th value={column} onClick={() => that.handleSort(theValue)} >{column}</th>

2.Then bind this in the constructor method:
    this.handleSort = this.handleSort.bind(this);

3.And finally get the value in the function:
  handleSort(theValue){
     console.log(theValue);
}

C'est un moyen très simple.

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

class TableHeader extends Component {
  handleClick = (parameter,event) => {
console.log(parameter)
console.log(event)

  }

  render() {
    return (
      <button type="button" 
onClick={this.handleClick.bind(this,"dataOne")}>Send</button>
    );
  }
}

Sortir de nulle part à cette question, mais je pense .bindque ça fera l'affaire. Trouvez l'exemple de code ci-dessous.

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

Utilisation de la fonction flèche:

Vous devez installer l'étape 2:

npm install babel-preset-stage-2:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

Il y a 3 façons de gérer cela: -

1. Liez la méthode dans le constructeur comme: -

   export class HeaderRows extends Component {
      constructor() {
          super();
          this.handleSort = this.handleSort.bind(this);
      }
   }

2. Utilisez la fonction flèche lors de sa création comme: -

   handleSort = () => {
       // some text here
   }

3. La troisième façon est la suivante: -

   <th value={column} onClick={() => that.handleSort} >{column}</th>

Vous pouvez utiliser votre code comme ceci:

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

Ici, c'est pour un objet d'événement, si vous souhaitez utiliser des méthodes d'événement comme preventDefault()dans votre fonction de poignée ou si vous voulez obtenir une valeur cible ou un nom comme e.target.name.

J'ai trouvé la solution de passer param comme attribut d'un tag tout à fait raisonnable.

Cependant, il a ses limites:

• Ne fonctionne pas correctement lorsque l'élément de liste a d'autres balises (donc event.target peut être différent de celui prévu)
• Param ne peut être qu'une chaîne. Nécessite la sérialisation et la désérialisation.

C'est pourquoi j'ai créé cette bibliothèque: react-event-param

Il:

• Résout le problème des enfants en recherchant l'attribut nécessaire chez les parents chaque fois que nécessaire
• Sérialise et désérialise automatiquement les paramètres
• Encapsule la logique de définition et d'obtention. Pas besoin de jouer avec les noms des paramètres

Exemple d'utilisation:

import { setEventParam, getEventParam } from "react-event-param";

class List extends Component {
  onItemClick = e => {
    const index = getEventParam(e.target);
    // Do something with index
  };

  render() {
    return (
      <ul>
        {this.props.items.map((itemText, index) => (
          <li
            key={index}
            {...setEventParam(index)}
            onClick={this.onItemClick}
          >
            {{ itemText }}
          </li>
        ))}
      </ul>
    );
  }
}

export default List;

Il y avait beaucoup de considérations de performances, toutes dans le vide.
Le problème avec ces gestionnaires est que vous devez les curry afin d'incorporer l'argument que vous ne pouvez pas nommer dans les accessoires.
Cela signifie que le composant a besoin d'un gestionnaire pour chaque élément cliquable. Convenons que pour quelques boutons ce n'est pas un problème, non?
Le problème se pose lorsque vous manipulez des données tabulaires avec des dizaines de colonnes et des milliers de lignes. Là, vous remarquez l'impact de la création d'autant de gestionnaires.

Le fait est que je n'en ai besoin que d'un.
J'ai défini le gestionnaire au niveau de la table (ou UL ou OL ...), et lorsque le clic se produit, je peux dire quelle était la cellule cliquée en utilisant les données disponibles depuis toujours dans l'objet événement:

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

J'utilise les champs de variable pour vérifier que le clic s'est produit dans un élément valide, par exemple ignorer les clics dans les pieds de page des TH.
Le rowIndex et le cellIndex donnent l'emplacement exact de la cellule cliquée.
Le contenu du texte est le texte de la cellule cliquée.

De cette façon, je n'ai pas besoin de transmettre les données de la cellule au gestionnaire, il peut le self-service.
Si j'avais besoin de plus de données, de données qui ne doivent pas être affichées, je peux utiliser l'attribut d'ensemble de données ou des éléments cachés.
Avec une navigation DOM simple, tout est à portée de main.
Cela a été utilisé en HTML depuis toujours, car les PC étaient beaucoup plus faciles à embourber.

Il existe deux façons de passer des paramètres dans les gestionnaires d'événements, certains suivent.

Vous pouvez utiliser une fonction de flèche pour encapsuler un gestionnaire d'événements et transmettre des paramètres:

<button onClick={() => this.handleClick(id)} />

l'exemple ci-dessus équivaut à appeler .bindou vous pouvez explicitement appeler bind.

<button onClick={this.handleClick.bind(this, id)} />

En dehors de ces deux approches, vous pouvez également passer des arguments à une fonction définie comme une fonction curry.

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

Utilisez une fermeture , il en résulte une solution propre:

<th onClick={this.handleSort(column)} >{column}</th>

La fonction handleSort renverra une fonction dont la colonne de valeur est déjà définie.

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

La fonction anonyme sera appelée avec la valeur correcte lorsque l'utilisateur cliquera sur le th.

Exemple: https://stackblitz.com/edit/react-pass-parameters-example

Un changement simple est requis:

Utilisation <th value={column} onClick={that.handleSort} >{column}</th>

au lieu de <th value={column} onClick={that.handleSort} >{column}</th>