blocks|key|412766|text|易道|type|unstyled|depth|inlineStyleRanges|entityRanges|data|412767|使用箭头函数：|412768|return+(
++<th+value={column}+onClick={()+=>+this.handleSort(column)}>{column}</th>
);|code-block|syntax|javascript|412769|这将创建一个新函数，该函数使用右参数调用handleSort。|offset|length|style|CODE|412770|更好的方法|412771|把它提取到一个子组件中。在呈现调用中使用箭头函数的问题是，它每次都会创建一个新函数，最终导致不必要的重新呈现。|412772|如果创建子组件，则可以传递处理程序并使用支持作为参数，然后只有当道具更改时才会重新呈现(因为处理程序引用现在从未更改)：|412773|子分量|412774|class+TableHeader+extends+Component+{
++handleClick+=+()+=>+{
++++this.props.onHeaderClick(this.props.value);
++}

++render()+{
++++return+(
++++++<th+onClick={this.handleClick}>
++++++++{this.props.column}
++++++</th>
++++);
++}
}|412775|主要部件|412776|{this.props.defaultColumns.map((column)+=>+(
++<TableHeader
++++value={column}
++++onHeaderClick={this.handleSort}
++/>
))}|412777|旧易道(ES5)|BOLD|412778|使用.bind传递所需的参数，这样就可以将函数绑定到组件上下文中：|412779|return+(
++<th+value={column}+onClick={this.handleSort.bind(this,+column)}>{column}</th>
);|412780|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind^0|0|0|0|K|A|0|0|0|C|0|0|0|0|0|0|0|0|8|0|2|5|2|5|1|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1M|8|@$K|1N|L|1O|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@$K|1R|L|1S|1|1T]]|A|$]]|$1|S|3|T|5|6|7|1U|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1V|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1W|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1Y|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|6|7|1Z|8|@$K|20|L|21|M|14]]|9|@]|A|$]]|$1|15|3|16|5|6|7|22|8|@$K|23|L|24|M|N]]|9|@$K|25|L|26|1|27]]|A|$]]|$1|17|3|18|5|F|7|28|8|@]|9|@]|A|$G|H]]|$1|19|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]]]

<h2>Easy Way</h2>

<p>Use an arrow function:</p>

<pre><code>return (
  &lt;th value={column} onClick={() =&gt; this.handleSort(column)}&gt;{column}&lt;/th&gt;
);
</code></pre>

<p>This will create a new function that calls <code>handleSort</code> with the right params.</p>

<h2>Better Way</h2>

<p><a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips" rel="noreferrer">Extract it into a sub-component.</a>
The problem with using an arrow function in the render call is it will create a new function every time, which ends up causing unneeded re-renders.</p>

<p>If you create a sub-component, you can pass handler and use props as the arguments, which will then re-render only when the props change (because the handler reference now never changes):</p>

<p><em>Sub-component</em></p>

<pre><code>class TableHeader extends Component {
  handleClick = () =&gt; {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      &lt;th onClick={this.handleClick}&gt;
        {this.props.column}
      &lt;/th&gt;
    );
  }
}
</code></pre>

<p><em>Main component</em></p>

<pre><code>{this.props.defaultColumns.map((column) =&gt; (
  &lt;TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  /&gt;
))}
</code></pre>

<hr>

<p><strong>Old Easy Way (ES5)</strong></p>

<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="noreferrer"><code>.bind</code></a> to pass the parameter you want, this way you are binding the function with the Component context :</p>

<pre><code>return (
  &lt;th value={column} onClick={this.handleSort.bind(this, column)}&gt;{column}&lt;/th&gt;
);
</code></pre>


blocks|key|2757972|text|现在，有了ES6，我觉得我们可以使用最新的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2757973|return+(
++<th+value={column}+onClick={()=>this.handleSort(column)}+>{column}</th>
);|code-block|syntax|javascript|2757974|基本上，(对于任何不知道的)因为onClick期待一个传递给它的函数，bind工作是因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，该表达式只调用我们想要的函数，并保留this。您不应该需要在React中绑定render方法，但是如果由于某种原因，您在组件方法中丢失了this：|offset|length|style|CODE|2757975|constructor(props)+{
++super(props);
++this.myMethod+=+this.myMethod.bind(this);
}|2757976|entityMap^0|0|0|G|7|Z|4|2L|4|35|6|3Z|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$]]

<p>Nowadays, with ES6, I feel we could use an updated answer. </p>

<pre><code>return (
  &lt;th value={column} onClick={()=&gt;this.handleSort(column)} &gt;{column}&lt;/th&gt;
);
</code></pre>

<p>Basically, (for any that don't know) since <code>onClick</code> is expecting a function passed to it, <code>bind</code> works because it creates a copy of a function. Instead we can pass an arrow function expression that simply invokes the function we want, and preserves <code>this</code>. You should never need to bind the <code>render</code> method in React, but if for some reason you're losing <code>this</code> in one of your component methods:</p>

<pre><code>constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}
</code></pre>


blocks|key|1458055|text|class+extends+React.Component+{
++++onClickDiv+=+(column)+=>+{
++++++++//+do+stuff
++++}
++++render()+{
++++++++return+<div+onClick={()+=>+this.onClickDiv('123')}+/>
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1458056|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1458061|text|另一个不涉及.bind或ES6的选项是使用带有处理程序的子组件来用必要的道具调用父处理程序。下面是一个示例(下面是一个指向工作示例的链接)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1458062|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);
++++}
++}
});|code-block|syntax|javascript|1458063|基本思想是父组件将onClick函数传递给子组件。子组件调用onClick函数，并可以访问传递给它的任何props+(和event)，允许您在父级onClick函数中使用任何event值或其他道具。|1458064|下面是一个CodePen演示，显示了这个方法的作用。|1458065|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/brettdewoody/pen/XdLVOO^0|6|5|0|0|9|7|U|7|1G|5|1O|5|21|7|2F|5|0|5|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|O|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>One more option not involving <code>.bind</code> or ES6 is to use a child component with a handler to call the parent handler with the necessary props. Here's an example (and a link to working example is below):</p>

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

// 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 (
      &lt;th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      &lt;/th&gt;
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});
</code></pre>

<p>The basic idea is for the parent component to pass the <code>onClick</code> function to a child component. The child component calls the <code>onClick</code> function and can access any <code>props</code> passed to it (and the <code>event</code>), allowing you to use any <code>event</code> value or other props within the parent's <code>onClick</code> function. </p>

<p>Here's a <a href="https://codepen.io/brettdewoody/pen/XdLVOO" rel="noreferrer">CodePen demo</a> showing this method in action. </p>


blocks|key|2758031|text|[h/t+to+@E.Sundin+for+将此链接在评论中]|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2758032|顶部的答案(匿名函数或绑定)可以工作，但它不是最具表现力的，因为它为map()函数生成的每个实例创建了事件处理程序的副本。|style|CODE|2758033|这是对从ESLint-插件-反应执行此操作的最佳方法的解释。|2758034|项目清单
呈现中绑定的一个常见用例是，在呈现列表时，每个列表项都有一个单独的回调：|blockquote|2758035|const+List+=+props+=>+(
++++++<ul>
++++++++{props.items.map(item+=>
++++++++++<li+key={item.id}+onClick={()+=>+console.log(item.id)}>
++++++++++++...
++++++++++</li>
++++++++)}
++++++</ul>
++++);|code-block|syntax|javascript|2758036|与其这样做，不如将重复的部分拉到它自己的组件中：|2758037|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>
++++);

});|2758038|这将加快呈现速度，因为它避免了在每次呈现时创建新函数(通过绑定调用)的需要。|2758039|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md|1^0|M|4|0|0|Y|5|0|4|C|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|J|3|K|5|L|7|1H|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1I|8|@]|9|@]|C|$P|Q]]|$1|R|3|S|5|L|7|1J|8|@]|9|@]|C|$]]|$1|T|3|U|5|O|7|1K|8|@]|9|@]|C|$P|Q]]|$1|V|3|W|5|L|7|1L|8|@]|9|@]|C|$]]|$1|X|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]|15|$5|10|11|12|C|$13|14]]]]

<p>[[h/t to @E.Sundin for <a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md" rel="noreferrer">linking this</a> in a comment]</p>

<p>The top answer (anonymous functions or binding) will work, but it's not the most performant, as it creates a copy of the event handler for every instance generated by the <code>map()</code> function.</p>

<p>This is an explanation of the optimal way to do it from the <a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md" rel="noreferrer">ESLint-plugin-react</a>:</p>

<blockquote>
  <p>Lists of Items</p>
  
  <p>A common use case of bind in render is when rendering a list, to have
  a separate callback per list item:</p>
</blockquote>

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

<blockquote>
  <p>Rather than doing it this way, pull the repeated section into its own
  component:</p>
</blockquote>

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


const ListItem = props =&gt; {
  const _onClick = () =&gt; {
    console.log(props.item.id);
  }
    return (
      &lt;li onClick={_onClick}&gt;
        ...
      &lt;/li&gt;
    );

});
</code></pre>

<blockquote>
  <p>This will speed up rendering, as it avoids the need to create new
  functions (through bind calls) on every render.</p>
</blockquote>


blocks|key|412946|text|我认为，React的映射中的.bind(this,+arg1,+arg2,+...)+-是不好的代码，因为它是慢的！10-50的.bind(this)在单一渲染方法-非常慢的代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|412947|我就这样把它修好：|412948|渲染法|412949|<tbody+onClick={this.handleClickRow}>|412950|<tr+data-id={listItem.id}>地图|412951|处理程序|412952|var+id+=+$(ev.target).closest('tr').data().id|412953|完整代码如下：|412954|​|412955|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+%7C%7C+!dataset.id)+return
++++this.setState({selectedItemId:%2Bdataset.id})
++++alert(dataset.id)+//+Have+fun!
++}
}

ReactDOM.render(<MyGrid/>,+document.getElementById("react-dom"))|code-block|syntax|javascript|412956|table+{
++border-collapse:+collapse;
}

.selected+td+{
++background-color:+rgba(0,+0,+255,+0.3);
}|412957|<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>|412958|412959|entityMap^0|E|S|1S|B|0|0|0|0|11|0|0|Q|0|0|0|19|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1O|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1P|8|@]|D|@]|E|$]]|$1|V|3|W|5|X|7|1Q|8|@]|D|@]|E|$Y|Z]]|$1|10|3|11|5|X|7|1R|8|@]|D|@]|E|$Y|Z]]|$1|12|3|13|5|X|7|1S|8|@]|D|@]|E|$Y|Z]]|$1|14|3|U|5|6|7|1T|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|16|$]]

<p>I think, <code>.bind(this, arg1, arg2, ...)</code> in React's map - is bad code, because it is slow! 10-50 of <code>.bind(this)</code> in single render method - very slow code.<br/>
I fix it like this:<br/>
<em>Render method</em><br/>
<code>&lt;tbody onClick={this.handleClickRow}&gt;</code><br/>
map of <code>&lt;tr data-id={listItem.id}&gt;</code><br/>
<em>Handler</em><br/>
<code>var id = $(ev.target).closest('tr').data().id</code></p>

<p>Full code below:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
      &lt;table&gt;
        &lt;tbody onClick={handleClickRow}&gt;
          {list.map(listItem =&gt;(
            &lt;tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}&gt;
              &lt;td&gt;{listItem.id}&lt;/td&gt;
              &lt;td&gt;{listItem.name}&lt;/td&gt;
            &lt;/tr&gt;
          ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    )
  }
  
  handleClickRow = (ev) =&gt; {
    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(&lt;MyGrid/&gt;, document.getElementById("react-dom"))</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
}

.selected td {
  background-color: rgba(0, 0, 255, 0.3);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="react-dom"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|412975|text|这是我的方法，不知道有多糟，请评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|412976|在可点击元素中|412977|return+(
++++<th+value={column}+onClick={that.handleSort}+data-column={column}>+++{column}</th>
);|code-block|syntax|javascript|412978|然后|412979|handleSort(e){
++++this.sortOn(e.currentTarget.getAttribute('data-column'));
}|412980|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is my approach, not sure how bad it is, please comment</p>

<p>In the clickable element </p>

<pre><code>return (
    &lt;th value={column} onClick={that.handleSort} data-column={column}&gt;   {column}&lt;/th&gt;
);
</code></pre>

<p>and then</p>

<pre><code>handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}
</code></pre>


blocks|key|2758125|text|关于JSX+onClick事件，我有以下3条建议-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758126|实际上，我们不需要在代码中使用.bind()或Arrow函数。您可以在代码中简单地使用。|ordered-list-item|2758127|还可以将onClick事件从th(或ul)移动到tr(或li)以提高性能。基本上，对于n+li元素，您将有n个“事件侦听器”。
最后，代码将如下所示：{this.props.items.map(item+=>+.+)}
//并且可以在item.id方法中访问onItemClick，如下所示：
onItemClick+=(事件)+=>+{=>}|offset|length|style|CODE|2758128|我同意上面提到的为ListItem和List创建单独的React组件的方法。这使得代码看起来不错，但是如果您有1000个li，那么就会创建1000个事件侦听器。请确保您不应该有太多的事件侦听器。
导入从"+react+"；从“./+ListItem”导入ListItem；导出默认类列表扩展React.Component+{+/**+*该列表反应组件是泛型组件，它以道具作为项目列表，并提供onlick+*回调名称handleItemClick+*+@param+{String}+item+-+item对象传递给调用者*/+handleItemClick+=(项目)+=>+{+if+(this.props.onItemClick)+{this.props.onItemClick(项目)；}}+/**+*+render方法将项目列表作为支持，并包括ListItem组件*+@returns+{string}+-返回项*/+render()+{render(+{this.props.items.map(item+=>+)}+})的列表；}导入从“react”返回；导出默认类ListItem扩展React.Component+{+/**+*此列表React组件是泛型组件，它以道具为项目，并提供onlick+*回调名称handleItemClick+*+@param+{String}+item+-+item对象传递给调用方*/+handleItemClick+=+()+=>+{+if+(this.props.item+&+this.props.onItemClick)+{+this.props.onItemClick(this.props.item)；}}+/**+*+render方法将以项目作为支持，并在li+*@返回{string}中打印-返回项的列表*/+render()+{返回(+{this.props.item.text}+)；}}|2758129|entityMap^0|0|0|39|7|3L|B|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|Q|8|@$G|R|H|S|I|J]|$G|T|H|U|I|J]]|9|@]|A|$]]|$1|K|3|L|5|D|7|V|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|N|$]]

<p>I have below 3 suggestion to this on JSX onClick Events - </p>

<ol>
<li><p>Actually, we don't need to use .bind() or Arrow function in our code. You can simple use  in your code.</p></li>
<li><p>You can also move onClick event from th(or ul) to tr(or li) to improve the performance. Basically you will have n number of "Event Listeners" for your n li element.</p>

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

<p>// And you can access <code>item.id</code> in <code>onItemClick</code> method as shown below: </p>

<pre><code>onItemClick = (event) =&gt; {
   console.log(e.target.getAttribute("item.id"));
}
</code></pre></li>
<li><p>I agree with the approach mention above for creating separate React Component for ListItem and List. This make code looks good however if you have 1000 of li then 1000 Event Listeners will be created. Please make sure you should not have much event listener.</p>

<pre><code>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) =&gt; {
        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 (
            &lt;div&gt;
              {this.props.items.map(item =&gt;
                  &lt;ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/&gt;
              )}
            &lt;/div&gt;
        );
    }

}


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 = () =&gt; {
        if (this.props.item &amp;&amp; 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 (
            &lt;li key={this.props.item.id} onClick={this.handleItemClick}&gt;{this.props.item.text}&lt;/li&gt;
        );
    }
}
</code></pre></li>
</ol>


blocks|key|2758194|text|这里有很好的答案，我同意@Austin+(第二个选项有单独的组件)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758195|还有一种我喜欢的方式，竞逐。|offset|length|2758196|您可以做的是创建一个函数，该函数接受一个参数(您的参数)，并返回另一个接受另一个参数的函数(本例中是单击事件)。那么你就可以随心所欲地做任何事。|2758197|ES5:|style|BOLD|2758198|handleChange(param)+{+//+param+is+the+argument+you+passed+to+the+function
++++return+function+(e)+{+//+e+is+the+event+object+that+returned

++++};
}|code-block|syntax|javascript|2758199|ES6:|2758200|handleChange+=+param+=>+e+=>+{
++++//+param+is+the+argument+you+passed+to+the+function
++++//+e+is+the+event+object+that+returned
};|2758201|你可以这样使用它：|2758202|<input+
++++type="text"+
++++onChange={this.handleChange(someParam)}+
/>|2758203|以下是这类用法的完整示例：|2758204|​|2758205|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"+%2B+param]:+nextValue+});
++};

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

const+rootElement+=+document.getElementById("root");
ReactDOM.render(<App+/>,+rootElement);|2758206|<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>|2758207|2758208|请注意，这种方法并不解决在每个呈现上创建一个新实例的问题。|2758209|与其他内联处理程序相比，我更喜欢这种方法，因为在我看来，这一方法更简洁、更易读。|2758210|编辑：|2758211|正如在下面的注释中所建议的，您可以缓存/回溯函数的结果。|2758212|下面是一个简单的实现：|2758213|2758214|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"+%2B+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"+%2B+obj]}
++++++++++++++++onChange={this.handleChange(obj)}
++++++++++++++/>
++++++++++++++<br+/>
++++++++++++++<br+/>
++++++++++++</div>
++++++++++);
++++++++})}
++++++</div>
++++);
++}
}

const+rootElement+=+document.getElementById("root");
ReactDOM.render(<App+/>,+rootElement);|2758215|<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"+/>|2758216|2758217|entityMap|0|LINK|mutability|MUTABLE|url|https://www.sitepoint.com/currying-in-functional-javascript/^0|0|B|2|0|0|0|0|4|0|0|0|4|0|0|0|0|0|0|0|0|0|0|0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@]|9|@$D|1X|E|1Y|1|1Z]]|A|$]]|$1|F|3|G|5|6|7|20|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|21|8|@$D|22|E|23|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|24|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|25|8|@$D|26|E|27|J|K]]|9|@]|A|$]]|$1|S|3|T|5|N|7|28|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|29|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|2A|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|2B|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2C|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|2D|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|N|7|2E|8|@]|9|@]|A|$O|P]]|$1|16|3|11|5|6|7|2F|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2G|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2H|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2I|8|@$D|2J|E|2K|J|K]]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1H|3|11|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|N|7|2O|8|@]|9|@]|A|$O|P]]|$1|1K|3|1L|5|N|7|2P|8|@]|9|@]|A|$O|P]]|$1|1M|3|11|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]]|1O|$1P|$5|1Q|1R|1S|A|$1T|1U]]]]

<p>There are nice answers here, and i agree with @Austin Greco (the second option with separate components)<br>
There is another way i like, <a href="https://www.sitepoint.com/currying-in-functional-javascript/" rel="noreferrer">currying</a>.<br>
What you can do is create a function that accept a parameter (your parameter) and returns another function that accepts another parameter (the click event in this case). then you are free to do with it what ever you want.</p>

<p><strong>ES5:</strong>  </p>

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

    };
}
</code></pre>

<p><strong>ES6:</strong>  </p>

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

<p>And you will use it this way:</p>

<pre><code>&lt;input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/&gt;
</code></pre>

<p>Here is a full example of such usage:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param =&gt; e =&gt; {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      &lt;div&gt;
        {someArr.map(obj =&gt; {
          return (
            &lt;div&gt;
              &lt;label&gt;
                {`input ${obj}   `}
              &lt;/label&gt;
              &lt;input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Note that this approach doesn't solve the creation of a new instance on each render.<br>
I like this approach over the other inline handlers as this one is more concise and readable in my opinion. </p>

<p><strong>Edit:</strong><br>
As suggested in the comments below, you can cache / memoize the result of the function. </p>

<p>Here is a naive implementation: </p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
    const handler = e =&gt; {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e =&gt; handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      &lt;div&gt;
        {someArr.map(obj =&gt; {
          return (
            &lt;div key={obj}&gt;
              &lt;label&gt;
                {`input ${obj}   `}
              &lt;/label&gt;
              &lt;input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="root" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|413105|text|这个例子可能和你的没有什么不同。但我可以向你保证，这是解决这个问题的最好办法。几天来，我一直在寻找一个没有性能问题的解决方案。终于想出了这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413106|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>
++++);
++}
}|code-block|syntax|javascript|413107|更新|offset|length|style|BOLD|413108|以防万一，您想要处理的对象应该是参数。您可以使用JSON.stringify(object)将其转换为string并添加到数据集中。|CODE|413109|return+(
+++<div>
+++++<h3+data-param={JSON.stringify({name:'me'})}+onClick={this.handleClick}>
++++++++{this.state.name}
+++++</h3>
+++</div>
);|413110|entityMap^0|0|0|0|2|0|O|M|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Y|8|@$I|Z|J|10|K|O]]|9|@]|A|$]]|$1|P|3|Q|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>this example might be little different from yours. but i can assure you that this is the best solution you can have for this problem. 
i have searched for days for a solution which has no performance issue. and finally came up with this one.</p>

<pre><code>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 (
      &lt;div&gt;
        &lt;h3 data-param="value what you wanted to pass" onClick={this.handleClick}&gt;
          {this.state.name}
        &lt;/h3&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p><strong>UPDATE</strong></p>

<p>incase you want to deal with objects that are supposed to be the parameters. you can use <code>JSON.stringify(object)</code> to convert to it to string and add to the data set. </p>

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


blocks|key|413144|text|我编写了一个可用于此目的的包装器组件，该组件构建在这里接受的答案之上。但是，如果您只需要传递一个字符串，那么只需添加一个数据属性并从e.target.dataset读取它(就像其他人建议的那样)。默认情况下，我的包装器将绑定到任何作为函数的支柱，并以“on”开头，并在所有其他事件参数之后自动将数据支柱传递回调用方。虽然我还没有测试它的性能，但它将给您机会避免自己创建类，并且可以这样使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413145|const+DataButton+=+withData('button')|offset|length|style|CODE|413146|const+DataInput+=+withData('input');|413147|或用于组件和功能|413148|const+DataInput+=+withData(SomeComponent);|413149|或者如果你愿意|413150|const+DataButton+=+withData(<button/>)|413151|声明在您的容器外(靠近您的进口)|413152|以下是容器中的用法：|413153|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>
++++++++);
++++}
}|code-block|syntax|javascript|413154|下面是包装程序代码的withData.js：|413155|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+%7C%7C+Target.name+%7C%7C+'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;
++++},+{});
}|413156|entityMap^0|0|0|11|0|0|10|0|0|0|16|0|0|0|12|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1H|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1L|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1M|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1N|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|13|5|X|7|1P|8|@]|9|@]|A|$Y|Z]]|$1|14|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|15|$]]

<p>I wrote a wrapper component that can be reused for this purpose that builds on the accepted answers here. If all you need to do is pass a string however, then just add a data-attribute and read it from e.target.dataset (like some others have suggested).  By default my wrapper will bind to any prop that is a function and starts with 'on' and automatically pass the data prop back to the caller after all the other event arguments.  Although I haven't tested it for performance, it will give you the opportunity to avoid creating the class yourself, and it can be used like this:</p>
<p><code>const DataButton = withData('button')</code></p>
<p><code>const DataInput = withData('input');</code></p>
<p>or for Components and functions</p>
<p><code>const DataInput = withData(SomeComponent);</code></p>
<p>or if you prefer</p>
<p><code>const DataButton = withData(&lt;button/&gt;)</code></p>
<p>declare that Outside your container (near your imports)</p>
<p>Here is usage in a container:</p>
<pre><code>import withData from './withData';
const DataInput = withData('input');

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

    handleItemChange = (e, data) =&gt; {
        // here the data is available 
        // ....
    }

    render () {
        return (
            &lt;div&gt;
                {
                    this.state.data.map((item, index) =&gt; (
                        &lt;div key={index}&gt;
                            &lt;DataInput data={item} onChange={this.handleItemChange} value={item.value}/&gt;
                        &lt;/div&gt;
                    ))
                }
            &lt;/div&gt;
        );
    }
}
</code></pre>
<p>Here is the wrapper code 'withData.js:</p>
<pre><code>import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) =&gt; {
    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 &lt;Target {...props} {...this.handlers} &gt;{children}&lt;/Target&gt;;
        }

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

    return WithData;
}

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

    return events.reduce((result, eventType) =&gt; {
        result[eventType] = (...args) =&gt; thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}
</code></pre>


blocks|key|2758296|text|我以两种方式添加了onclick事件值传递给该方法的代码。1.使用绑定方法2.使用箭头(=>)方法。参见handlesort1和handlesort方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758297|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(""%2BJSON.stringify(column));
++++},
++++handleSort1:++function(column)+{
+++++++console.log(column);
+++++++alert(""%2BJSON.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>);
++++}
});|code-block|syntax|javascript|2758298|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have added code for onclick event value pass to the method in two ways . 1 . using bind method 2. using arrow(=>) method .     see the methods handlesort1 and handlesort</p>

<pre><code>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(
        &lt;div&gt;
            &lt;div&gt;Using bind method&lt;/div&gt;
            {this.state.defaultColumns.map(function (column) {
                return (
                    &lt;div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} &gt;{column}&lt;/div&gt;
                );
            })}
            &lt;div&gt;Using Arrow method&lt;/div&gt;

            {this.state.defaultColumns.map(function (column) {
                return (
                    &lt;div value={column} style={{height : 40}} onClick={() =&gt; that.handleSort1(column)} &gt;{column}&lt;/div&gt;

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

        &lt;/div&gt;);
    }
});
</code></pre>


blocks|key|2758326|text|尝试回答OP的问题，包括e.preventDefault()调用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758327|呈现链接(ES6)|offset|length|style|BOLD|2758328|<a+href="#link"+onClick={(e)+=>+this.handleSort(e,+'myParam')}>|code-block|syntax|javascript|2758329|分量函数|2758330|handleSort+=+(e,+param)+=>+{
++e.preventDefault();
++console.log('Sorting+by:+'+%2B+param)
}|2758331|entityMap^0|0|5|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Making alternate attempt to answer OP's question including e.preventDefault() calls:</p>

<p>Rendered link (<strong>ES6</strong>)</p>

<pre><code>&lt;a href="#link" onClick={(e) =&gt; this.handleSort(e, 'myParam')}&gt;
</code></pre>

<p>Component Function</p>

<pre><code>handleSort = (e, param) =&gt; {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}
</code></pre>


blocks|key|2758376|text|使用箭头函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758377|您必须安装第二阶段：|2758378|npm安装babel-预置-阶段-2：|2758379|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;+|code-block|syntax|javascript|2758380|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Using arrow function :</p>

<p>You must install stage-2:</p>

<p>npm install babel-preset-stage-2 :    </p>

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

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

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


blocks|key|413270|text|处理这个问题的方法有三种：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413271|将构造函数中的方法绑定为:-
导出类HeaderRows扩展组件{构造函数(){+super()；this.handleSort+=+this.handleSort.bind(this)；}|ordered-list-item|413272|将箭头函数创建为:-
handleSort+=+()+=>+{+//此处的某些文本}|413273|第三条路是:-|413274|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|M|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|O|8|@]|9|@]|A|$]]]|J|$]]

<p>There are 3 ways to handle this :- </p>

<ol>
<li><p>Bind the method in constructor as :- </p>

<pre><code>export class HeaderRows extends Component {
   constructor() {
       super();
       this.handleSort = this.handleSort.bind(this);
   }
}
</code></pre></li>
<li><p>Use the arrow function while creating it as :-</p>

<pre><code>handleSort = () =&gt; {
    // some text here
}
</code></pre></li>
<li><p>Third way is this :-</p>

<pre><code>&lt;th value={column} onClick={() =&gt; that.handleSort} &gt;{column}&lt;/th&gt;
</code></pre></li>
</ol>


blocks|key|2758401|text|如果您使用的是ES6，您可以简单地这样做。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2758402|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>
+++++);
+++}
+}|code-block|syntax|javascript|2758403|entityMap^0|7|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can simply do it if you are using <code>ES6</code>.</p>

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

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


blocks|key|1458462|text|通过将count作为参数从main传递到子组件，实现从对象中显示总计数，如下所述。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1458463|这是MainComponent.js|1458464|import+React,+{+Component+}+from+"react";

import+SubComp+from+"./subcomponent";

class+App+extends+Component+{

++getTotalCount+=+(count)+=>+{
++++this.setState({
++++++total:+this.state.total+%2B+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;|code-block|syntax|javascript|1458465|这是SubComp.js|offset|length|style|CODE|1458466|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}+%7C%7C+Count:+{this.props.count}</p>
++++++</div>
++++)
++}
};|1458467|尝试实现上面的内容，您将得到在任何DOM方法上pass参数如何在reactjs中工作的确切场景。|1458468|entityMap^0|0|0|0|2|A|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Implementing show total count from an object by passing count as a parameter from main to sub components as described below.</p>

<p>Here is MainComponent.js    </p>

<pre><code>import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) =&gt; {
    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 (
      &lt;div className="App"&gt;
        {someData.map((nameAndCount, i) =&gt; {
          return (
            &lt;SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            /&gt;
          );
        })}
        &lt;h1&gt;Total Count: {this.state.total}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
}

export default App;
</code></pre>

<p>And Here is <code>SubComp.js</code></p>

<pre><code>import React, { Component } from 'react';
export default class SubComp extends Component {

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

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

<p>Try to implement above and you will get exact scenario that how pass parameters works in reactjs on any DOM method.</p>


blocks|key|1458479|text|下面是在onClick事件上传递值的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1458480|我使用了es6语法。记住在类中组件箭头函数不会自动绑定，因此在构造函数中显式绑定。|1458481|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>
+++++++++);
++++}
}|code-block|syntax|javascript|1458482|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Below is the example which passes value on onClick event.</p>

<p>I used es6 syntax. remember in class component arrow function does not bind automatically, so explicitly binding in constructor. </p>

<pre><code>class HeaderRows extends React.Component {

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

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

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

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


blocks|key|2758463|text|我猜您必须将该方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在将参数传递给方法时，第一个参数用于绑定方法的“this”上下文，因此无法访问方法中的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758464|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I guess you will have to bind the method to the React’s class instance. It’s safer to use a constructor to bind all methods in React. In your case when you pass the parameter to the method, the first parameter is used to bind the ‘this’ context of the method, thus you cannot access the value inside the method.</p>


blocks|key|2758466|text|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);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2758467|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

&lt;th value={column} onClick={() =&gt; that.handleSort(theValue)} &gt;{column}&lt;/th&gt;

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);
}
</code></pre>


blocks|key|1458543|text|有个很简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1458544|+onClick={this.toggleStart('xyz')}+.+
++toggleStart=+(data)+=>+(e)+=>{
+++++console.log('value+is'%2Bdata);++
+}|code-block|syntax|javascript|1458545|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Theres' a very easy way.</p>

<pre><code> onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) =&gt; (e) =&gt;{
     console.log('value is'+data);  
 }
</code></pre>


blocks|key|2758535|text|我意识到这对聚会来说已经很晚了，但我认为一个简单得多的解决方案可以满足许多用例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758536|++++handleEdit(event)+{
++++++++let+value+=+event.target.value;
++++}

++++...

++++<button
++++++++value={post.id}
++++++++onClick={this.handleEdit}+>Edit</button>|code-block|syntax|javascript|2758537|我想您也可以使用data-属性。|offset|length|style|CODE|2758538|简单，语义。|2758539|entityMap^0|0|0|8|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I realize this is pretty late to the party, but I think a much simpler solution could satisfy many use cases:</p>

<pre><code>    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    &lt;button
        value={post.id}
        onClick={this.handleEdit} &gt;Edit&lt;/button&gt;
</code></pre>

<p>I presume you could also use a <code>data-</code> attribute.</p>

<p>Simple, semantic.</p>


blocks|key|2758561|text|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>
++++);
++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2758562|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>class TableHeader extends Component {
  handleClick = (parameter,event) =&gt; {
console.log(parameter)
console.log(event)

  }

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


blocks|key|413460|text|您可以这样使用代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413461|<th+value={column}+onClick={(e)+=>+that.handleSort(e,+column)}+>{column}</th>|code-block|syntax|javascript|413462|这里是事件对象，如果您想在句柄函数中使用像preventDefault()这样的事件方法，或者想获得目标值或名称(如e.target.name+)。|offset|length|style|CODE|413463|entityMap^0|0|0|L|G|1M|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>You can use your code like this:</p>

<pre><code>&lt;th value={column} onClick={(e) =&gt; that.handleSort(e, column)} &gt;{column}&lt;/th&gt;
</code></pre>

<p>Here e is for event object, if you want to use event methods like <code>preventDefault()</code> in your handle function or want to get target value or name like <code>e.target.name</code>.</p>


blocks|key|2758589|text|有两种在事件处理程序中传递参数的方法，其中一些方法如下.|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2758590|可以使用箭头函数对事件处理程序进行包装，并传递参数：|2758591|<button+onClick={()+=>+this.handleClick(id)}+/>|code-block|syntax|javascript|2758592|上面的示例相当于调用.bind，或者您可以显式调用bind。|CODE|2758593|<button+onClick={this.handleClick.bind(this,+id)}+/>|2758594|除了这两种方法之外，还可以将参数传递给定义为curry函数的函数。|2758595|handleClick+=+(id)+=>+()+=>+{
++++console.log("Hello,+your+ticket+number+is",+id)
};

<button+onClick={this.handleClick(id)}+/>|2758596|entityMap^0|0|S|0|0|0|A|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|12|8|@$9|13|A|14|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|16|8|@]|D|@]|E|$]]|$1|T|3|U|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|V|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|W|$]]

<p><strong>There are couple of ways to pass parameter in event handlers, some are following.</strong></p>

<p>You can use an arrow function to wrap around an event handler and pass parameters:</p>

<pre><code>&lt;button onClick={() =&gt; this.handleClick(id)} /&gt;
</code></pre>

<p>above example is equivalent to calling <code>.bind</code> or you can explicitly call bind.</p>

<pre><code>&lt;button onClick={this.handleClick.bind(this, id)} /&gt;
</code></pre>

<p>Apart from these two approaches, you can also pass arguments to a function that is defined as a curry function.</p>

<pre><code>handleClick = (id) =&gt; () =&gt; {
    console.log("Hello, your ticket number is", id)
};

&lt;button onClick={this.handleClick(id)} /&gt;
</code></pre>


blocks|key|2758607|text|在这个问题上不知从哪里冒出来，但我认为.bind能做到这一点。找到下面的示例代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2758608|const+handleClick+=+(data)+=>+{
++++console.log(data)
}

<button+onClick={handleClick.bind(null,+{+title:+'mytitle',+id:+'12345'+})}>Login</button>|code-block|syntax|javascript|2758609|entityMap^0|J|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Coming out of nowhere to this question, but i think <code>.bind</code> will do the trick. Find the sample code below. </p>

<pre><code>const handleClick = (data) =&gt; {
    console.log(data)
}

&lt;button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}&gt;Login&lt;/button&gt;
</code></pre>


blocks|key|413502|text|有很多性能方面的考虑，都是在真空中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413503|这个处理程序的问题是，您需要对它们进行修改，以便将不能在道具中命名的参数合并起来。|413504|这意味着组件需要每个可点击元素的处理程序。让我们同意，对于几个按钮，这不是一个问题，对吗？|413505|当您处理具有数十列和数千行的表格数据时，就会出现问题。在这里，您会注意到创建这么多处理程序的影响。|413506|事实是我只需要一个。|413507|我在表级别(或UL或OL.)设置了处理程序，当单击发生时，我可以使用事件对象中自那时以来可用的数据判断哪个是单击的单元格：|413508|nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName+
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent|code-block|syntax|javascript|413509|我使用标签名字段来检查单击是否发生在一个有效的元素中，例如忽略页脚中的单击。|413510|rowIndex和cellIndex给出了单击单元的确切位置。|413511|Textcontent是单击单元格的文本。|413512|这样，我不需要将单元格的数据传递给处理程序，它可以自助服务它。|413513|如果需要更多数据、不显示的数据，可以使用dataset属性或隐藏元素。|413514|有了一些简单的DOM导航，就到此为止了。|413515|这已经在HTML中使用了，因为PC机更容易陷入困境。|413516|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1I|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

<p>There were a lot of performance considerations, all in the vacuum.<br>
The issue with this handlers is that you need to curry them in order to incorporate the argument that you can't name in the props.<br>
This means that the component needs a handler for each and every clickable element. Let's agree that for a few buttons this is not an issue, right?<br>
The problem arises when you are handling tabular data with dozens of columns and thousands of rows. There you notice the impact of creating that many handlers.  </p>

<p>The fact is, I only need one.<br>
I set the handler at the table level (or UL or OL...), and when the click happens I can tell which was the clicked cell using data available since ever in the event object:  </p>

<pre><code>nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent
</code></pre>

<p>I use the tagname fields to check that the click happened in a valid element, for example ignore clicks in THs ot footers.<br>
The rowIndex and cellIndex give the exact location of the clicked cell.<br>
Textcontent is the text of the clicked cell.  </p>

<p>This way I don't need to pass the cell's data to the handler, it can self-service it.<br>
If I needed more data, data that is not to be displayed, I can use the dataset attribute, or hidden elements.<br>
With some simple DOM navigation it's all at hand.<br>
This has been used in HTML since ever, since PCs were much easier to bog.  </p>


blocks|key|2758633|text|需要进行简单的更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758634|使用<th+value={column}+onClick={that.handleSort}+>{column}</th>|offset|length|style|CODE|2758635|而不是<th+value={column}+onClick={that.handleSort}+>{column}</th>|2758636|entityMap^0|0|2|1N|0|3|1N|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>Simple changed is required: </p>

<p>Use 
<code>&lt;th value={column} onClick={that.handleSort} &gt;{column}&lt;/th&gt;</code></p>

<p>instead of
<code>&lt;th value={column} onClick={that.handleSort} &gt;{column}&lt;/th&gt;</code></p>


blocks|key|2758653|text|简单地创建一个像这样的函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758654|++function+methodName(params)+{
++++//the+thing++you+wanna+do
++}|code-block|syntax|javascript|2758655|在你需要的地方打电话|2758656|+<Icon+onClick+=+{()+=>+{+methodName(theParamsYouwantToPass);}+}/>|2758657|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Simply create a function like this</p>
<pre><code>  function methodName(params) {
    //the thing  you wanna do
  }
</code></pre>
<p>and call it in the place you need</p>
<pre><code> &lt;Icon onClick = {() =&gt; { methodName(theParamsYouwantToPass);} }/&gt;
</code></pre>


blocks|key|2758681|text|使用闭包，就会得到一个干净的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2758682|<th+onClick={this.handleSort(column)}+>{column}</th>|CODE|2758683|handleSort函数将返回一个已经设置了值列的函数。|2758684|handleSort:+function(value)+{+
++++return+()+=>+{
++++++++console.log(value);
++++}
}|code-block|syntax|javascript|2758685|当用户单击th时，将用正确的值调用匿名函数。|2758686|示例：https://stackblitz.com/edit/react-pass-parameters-example|2758687|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/react-pass-parameters-example^0|2|2|0|0|1G|0|N|1|0|0|0|3|1L|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1A|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1B|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|T|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Use a <strong>closure</strong>, it result in a clean solution: </p>

<p><code>&lt;th onClick={this.handleSort(column)} &gt;{column}&lt;/th&gt;</code></p>

<p>handleSort function will return a function that have the value <strong>column</strong> already set.    </p>

<pre><code>handleSort: function(value) { 
    return () =&gt; {
        console.log(value);
    }
}
</code></pre>

<p>The anonymous function will be called with the correct value when the user click on the th.</p>

<p>Example: <a href="https://stackblitz.com/edit/react-pass-parameters-example" rel="nofollow noreferrer">https://stackblitz.com/edit/react-pass-parameters-example</a></p>


blocks|key|2758709|text|React解决方案2022|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758710|const+arr+=+[
++{+id:+1,+txt:+'One'+},
++{+id:+2,+txt:+'Two'+},
++{+id:+3,+txt:+'Three'+},
]

const+App+=+()+=>+{
++const+handleClick+=+useCallback(
++++(id)+=>+()+=>+{
++++++console.log("ID:+",+id)
++++},
++++[],
++)

++return+(
++++<div>
++++++{arr.map((item)+=>+(
++++++++<button+onClick={handleClick(item.id)}>{item.txt}</button>
++++++))}
++++</div>
++)
}|code-block|syntax|javascript|2758711|您可以传递一个函数以使用useCallback的返回，然后您可以在呈现中通过传递参数调用函数。就像一种魅力！只需确保适当地设置了useCallback的依赖数组。|2758712|反应>=+16的最佳解决方案|2758713|我发现在不使用内联函数的情况下调用具有多个参数的onClick、onChange等函数的最干净方法是使用React+16和更高版本中可用的自定义data属性。|offset|length|style|CODE|2758714|const+App+=+()+=>+{
++const+onClick+=+(e)+=>+{
++++const+value1+=+e.currentTarget.getAttribute("data-value1")
++++const+value2+=+e.currentTarget.getAttribute("data-value2")
++++const+value2+=+e.currentTarget.getAttribute("data-value2")
++++console.log("Values1",+value1)
++++console.log("Values2",+value2)
++++console.log("Values3",+value3)
++}
++return+(
++++<button+onClick={onClick}+data-value1="a"+data-value2="b"+data-value3="c"+/>
++)
}|2758715|上面的示例适用于功能组件，但是实现非常相似，即使在类组件中也是如此。|2758716|这种方法不会产生不必要的重呈现，因为您没有使用内联函数，并且避免了与this绑定的麻烦。|2758717|它允许您传递您想要在您的函数中使用的多少值。|2758718|如果要将值作为支持传递给要在子组件的onClick中使用的子组件，您也可以在那里使用这种方法，而无需创建包装器函数。|2758719|在您希望将id从对象传递到onClick的情况下，也可以使用对象数组，如下所示。|2758720|const+App+=+()+=>+{
++const+[arrState,+setArrState]+=+useState(arr)

++const+deleteContent+=+(e)+=>+{
++++const+id+=+e.currentTarget.getAttribute("data-id")
++++const+tempArr+=+[...arrState]
++++const+filteredArr+=+tempArr.filter((item)+=>+item.id+!==+id)
++++setArrState(filteredArr)
++}

++return+(
++++<div>
++++++{arrState.map((item)+=>+(
++++++++<React.Fragment+key={item.id}>
++++++++++<p>{item.content}</p>
++++++++++<button+onClick={deleteContent}+data-id={item.id}>
++++++++++++Delete
++++++++++</button>
++++++++</React.Fragment>
++++++))}
++++</div>
++)
}|2758721|entityMap^0|0|0|0|0|20|4|0|0|0|Y|4|0|0|0|D|7|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@$M|1G|N|1H|O|P]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1J|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1K|8|@$M|1L|N|1M|O|P]]|9|@]|A|$]]|$1|12|3|13|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|14|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|15|$]]

<h1>React Hooks Solution 2022</h1>
<pre><code>const arr = [
  { id: 1, txt: 'One' },
  { id: 2, txt: 'Two' },
  { id: 3, txt: 'Three' },
]

const App = () =&gt; {
  const handleClick = useCallback(
    (id) =&gt; () =&gt; {
      console.log(&quot;ID: &quot;, id)
    },
    [],
  )

  return (
    &lt;div&gt;
      {arr.map((item) =&gt; (
        &lt;button onClick={handleClick(item.id)}&gt;{item.txt}&lt;/button&gt;
      ))}
    &lt;/div&gt;
  )
}
</code></pre>
<p>You can pass a function to useCallback's return, you can then call your function normally in the render by passing params to it. Works like a charm! Just make sure you set your useCallback's dependency array appropriately.</p>
<h1>Best Solution with React &gt;= 16</h1>
<p>The cleanest way I've found to call functions with multiple parameters in onClick, onChange etc. without using inline functions is to use the custom <code>data</code> attribute available in React 16 and above versions.</p>
<pre><code>const App = () =&gt; {
  const onClick = (e) =&gt; {
    const value1 = e.currentTarget.getAttribute(&quot;data-value1&quot;)
    const value2 = e.currentTarget.getAttribute(&quot;data-value2&quot;)
    const value2 = e.currentTarget.getAttribute(&quot;data-value2&quot;)
    console.log(&quot;Values1&quot;, value1)
    console.log(&quot;Values2&quot;, value2)
    console.log(&quot;Values3&quot;, value3)
  }
  return (
    &lt;button onClick={onClick} data-value1=&quot;a&quot; data-value2=&quot;b&quot; data-value3=&quot;c&quot; /&gt;
  )
}
</code></pre>
<p>Above example is for a functional component but the implementation is pretty similar even in class components.</p>
<p>This approach doesn't yield unnecessary re-renders because you aren't using inline functions, and you avoid the hassle of binding with <code>this</code>.</p>
<p>It allows you to pass as many values as you would like to use in your function.</p>
<p>If you are passing values as props to your children to be used in the Child Component's onClick, you can use this approach there as well, without creating a wrapper function.</p>
<p>Works with array of objects as well, in cases where you want to pass the id from the object to the <code>onClick</code>, as shown below.</p>
<pre><code>const App = () =&gt; {
  const [arrState, setArrState] = useState(arr)

  const deleteContent = (e) =&gt; {
    const id = e.currentTarget.getAttribute(&quot;data-id&quot;)
    const tempArr = [...arrState]
    const filteredArr = tempArr.filter((item) =&gt; item.id !== id)
    setArrState(filteredArr)
  }

  return (
    &lt;div&gt;
      {arrState.map((item) =&gt; (
        &lt;React.Fragment key={item.id}&gt;
          &lt;p&gt;{item.content}&lt;/p&gt;
          &lt;button onClick={deleteContent} data-id={item.id}&gt;
            Delete
          &lt;/button&gt;
        &lt;/React.Fragment&gt;
      ))}
    &lt;/div&gt;
  )
}
</code></pre>


blocks|key|2758732|text|当使用与类相反的函数时，它实际上相当容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758733|++++const+[breakfastMain,+setBreakFastMain]+=+useState("Breakfast");

const+changeBreakfastMain+=+(e)+=>+{
++++setBreakFastMain(e.target.value);
//sometimes+"value"+won't+do+it,+like+for+text,+etc.+In+that+case+you+need+to+
//write+'e.target/innerHTML'
+}

<ul++onClick={changeBreakfastMain}>
+++<li>
"some+text+here"
+++</li>
<li>
"some+text+here"
+++</li>
</ul>|code-block|syntax|javascript|2758734|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>When working with a function as opposed to a class, it's actually fairly easy.</p>
<pre><code>
    const [breakfastMain, setBreakFastMain] = useState(&quot;Breakfast&quot;);

const changeBreakfastMain = (e) =&gt; {
    setBreakFastMain(e.target.value);
//sometimes &quot;value&quot; won't do it, like for text, etc. In that case you need to 
//write 'e.target/innerHTML'
 }

&lt;ul  onClick={changeBreakfastMain}&gt;
   &lt;li&gt;
&quot;some text here&quot;
   &lt;/li&gt;
&lt;li&gt;
&quot;some text here&quot;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>


blocks|key|1458748|text|使用this.handleSort。在js中没有关键字that。谢谢兄弟。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1458749|onClick={this.handleSort}|code-block|syntax|javascript|1458750|entityMap^0|R|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Use this.handleSort. There's no keyword <code>that</code> in js. Thanks brother.</p>
<pre><code>onClick={this.handleSort}
</code></pre>


blocks|key|2758768|text|我会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2758769|const+HeaderRows+=+props+=>+{
++++const+handleSort+=+value+=>+()+=>+{

++++}

++++return+<tr>
++++++++{props.defaultColumns.map((column,+i)+=>
++++++++++++<th+key={i}+onClick={handleSort(column)}>{column}</th>)}
++++++++{props.externalColumns.map((column,+i)+=>+{
++++++++++++//+Multi+dimension+array+-+0+is+column+name
++++++++++++const+externalColumnName+=+column[0]
++++++++++++return+(<th+key={i}>{externalColumnName}</th>)
++++++++})}
++++</tr>
}|code-block|syntax|javascript|2758770|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'd do it like this:</p>
<pre><code>const HeaderRows = props =&gt; {
    const handleSort = value =&gt; () =&gt; {

    }

    return &lt;tr&gt;
        {props.defaultColumns.map((column, i) =&gt;
            &lt;th key={i} onClick={handleSort(column)}&gt;{column}&lt;/th&gt;)}
        {props.externalColumns.map((column, i) =&gt; {
            // Multi dimension array - 0 is column name
            const externalColumnName = column[0]
            return (&lt;th key={i}&gt;{externalColumnName}&lt;/th&gt;)
        })}
    &lt;/tr&gt;
}
</code></pre>


blocks|key|413682|text|您可以将值从参数传递到参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413683|return+(
++<th+value={column}+onClick={(column)+=>+this.handleSort(column)}>{column}</th>
);|code-block|syntax|javascript|413684|在这个场景中，我将列值传递给函数。|413685|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can pass values from parameter to parameter</p>
<pre><code>return (
  &lt;th value={column} onClick={(column) =&gt; this.handleSort(column)}&gt;{column}&lt;/th&gt;
);
</code></pre>
<p>In this scenario I pass the column value to function.</p>


<p>I want to read the onClick event value properties. But when I click on it, I see something like this on the console: </p>

<pre><code>SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
</code></pre>

<p>My code is working correctly. When I run I can see <code>{column}</code> but can't get it in the onClick event.</p>

<p>My Code:</p>

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

<p>How can I pass a value to the <code>onClick</code> event in React js?</p>


React js onClick can't pass value to method

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想读取onClick事件值属性。但是当我点击它的时候，我在控制台上看到了这样的东西：SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click"...

问onClick不能将值传递给方法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onClick不能将值传递给方法EN