React JS onClick ne peut pas passer de valeur à la méthode

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) puisque onClick attend une fonction qui lui est transmise, bind fonctionne 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 préserve this. Vous ne devriez jamais avoir besoin de lier la méthode render dans React, mais si pour une raison quelconque vous perdez this dans l'une de vos méthodes de composants:

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

[[h/t @E. Sundin pour reliant ce dans un commentaire]

La réponse supérieure (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 fonction map().

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

Liste des articles

Une utilisation de bind dans le rendu est lors du rendu d'une liste, d'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 sa 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 la nécessité de créer de nouveaux fonctions (via des appels de liaison) sur chaque Rendu.

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) mais je suis surpris que personne n'ait mentionné currying.
Ce que vous pouvez faire est de créer une fonction qui accepte un paramètre (paramètre) et renvoie une autre fonction qui accepte un autre paramètre (cliquez sur l'événement 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 va l'utiliser de cette façon:

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

Voici un exemple complet d'un tel usage:

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 celui-ci est plus concis 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" />

C'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>
);

, puis

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

Cet exemple peut être un peu différent du vôtre. mais je peux vous assurer que c'est la meilleure solution que vous pouvez avoir ce problème. j'ai cherché pendant des jours une solution qui n'a aucun problème de performance. et finalement est venu avec 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

Au cas où vous voulez traiter des objets qui sont supposés être les paramètres. vous pouvez 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>
        );

Une autre option n'impliquant pas .bind ou 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 exemple 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 passe la fonction onClick à un composant enfant. Le composant enfant appelle la fonction onClick et peut accéder à n'importe quel props qui lui est passé (et le event), vous permettant d'utiliser n'importe quelle valeur event ou d'autres accessoires dans le {[2 du parent]} fonction.

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

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

J'ai écrit un composant wrapper qui peut être réutilisé à cet effet et 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 à partir de E. target.dataset (comme d'autres l'ont suggéré). Par défaut, mon wrapper se liera à n'importe quel accessoire qui est une fonction et commence par 'on' et transmettra 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 la performance, il donnera vous avez la possibilité 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 les composants et les fonctions

const DataInput = withData(SomeComponent);

, Ou si vous préférez

const DataButton = withData(<button/>)

Déclarez cela 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 ajouté du code pour le passage de valeur d'événement onclick à la méthode de deux façons . 1 . utilisation de la méthode bind 2. utilisation de 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>);
    }
});

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

Lien Rendu ( ES6 )

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

Fonction Composante

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

J'ai ci-dessous 3 suggestion à cela sur les événements JSX onClick -

1. En fait, nous n'avons pas besoin d'utiliser .bind() ou la fonction flèche dans notre code. Vous pouvez utiliser simplement dans votre code.

2. Vous pouvez aussi 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 dans la méthode onItemClick comme indiqué ci-dessous:

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

3. Je suis d'accord avec la mention d'approche ci - dessus pour créer un composant React séparé pour ListItem et List. Ce code make semble bon mais si vous avez 1000 de li alors 1000 écouteurs D'événements seront créés. Assurez-vous de ne pas avoir beaucoup d'écouteurs 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>
           );
       }
   }
   

Utilisation de la fonction flèche:

, Vous devez installer stade 2:

Npm installer 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. Lie 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 tout en la créant comme: -

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

3. La Troisième voie est la suivante: -

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

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

Implémenter show total count à partir d'un objet en passant count en paramètre de main à sub components 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 que la façon dont les paramètres pass fonctionnent dans reactjs sur n'importe quelle méthode DOM.

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

J'ai utilisé la syntaxe es6. rappelez-vous dans la fonction de flèche de composant de classe ne se lie pas automatiquement, donc explicitement lié 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 de 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 dans 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);
}

Theres ' un moyen très facile.

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

Je pense, .bind(this, arg1, arg2, ...) dans la carte de React - est mauvais code, car il est lent! 10-50 de .bind(this) dans la méthode de rendu unique-code très lent.
J'ai corrigé comme ça:
méthode Render
<tbody onClick={this.handleClickRow}>
carte de <tr data-id={listItem.id}>
Gestionnaire
var id = $(ev.target).closest('tr').data().id

Code complet ci-dessous:

class MyGrid extends React.Component {
  // In real, I get this from props setted by connect in Redux
  state = {
    list: [
      {id:1, name:'Mike'},
      {id:2, name:'Bob'},
      {id:3, name:'Fred'}
    ],
    selectedItemId: 3
  }
  
  render () {
    const { list, selectedItemId }  = this.state
    const { handleClickRow } = this

    return (
      <table>
        <tbody onClick={handleClickRow}>
          {list.map(listItem =>(
            <tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}>
              <td>{listItem.id}</td>
              <td>{listItem.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
  
  handleClickRow = (ev) => {
    const target = ev.target
    // You can use what you want to find TR with ID, I use jQuery
    const dataset = $(target).closest('tr').data()
    if (!dataset || !dataset.id) return
    this.setState({selectedItemId:+dataset.id})
    alert(dataset.id) // Have fun!
  }
}

ReactDOM.render(<MyGrid/>, document.getElementById("react-dom"))

table {
  border-collapse: collapse;
}

.selected td {
  background-color: rgba(0, 0, 255, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="react-dom"></div>

Je recommanderais curry sur bind dans ce cas. Comme,

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