我想阅读onClick事件值属性。但是当我点击它时，我在控制台上看到类似的东西：
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
我的代码工作正常。当我运行时，我可以看到{column}，但无法在onClick事件中获取它。
我的代码：
var HeaderRows = React.createClass({
handleSort: function(value) {
console.log(value);
},
render: function () {
var that = this;
return(
<tr>
{this.props.defaultColumns.map(function (column) {
return (
<th value={column} onClick={that.handleSort} >{column}</th>
);
})}
{this.props.externalColumns.map(function (column) {
// Multi dimension array - 0 is column name
var externalColumnName = column[0];
return ( <th>{externalColumnName}</th>
);
})}
</tr>);
}
});
如何将值传递给React js中的onClick事件？
答案 0 :(得分：1013)
使用箭头功能：
return (
<th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);
这将创建一个新函数，使用正确的参数调用handleSort。
Extract it into a sub-component. 在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数，最终导致不需要的重新渲染。
如果你创建了一个子组件，你可以传递处理程序并使用props作为参数，然后只有当props更改时才会重新呈现（因为处理程序引用现在永远不会改变）：
子组件
class TableHeader extends Component {
handleClick = () => {
this.props.onHeaderClick(this.props.value);
}
render() {
return (
<th onClick={this.handleClick}>
{this.props.column}
</th>
);
}
}
主要组件
{this.props.defaultColumns.map((column) => (
<TableHeader
value={column}
onHeaderClick={this.handleSort}
/>
))}
Old Easy Way（ES5）
使用.bind传递您想要的参数：
return (
<th value={column} onClick={that.handleSort.bind(that, column)}>{column}</th>
);
答案 1 :(得分：107)
如今，有了ES6，我觉得我们可以使用更新的答案。
return (
<th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);
基本上，（对于任何不知道的人），因为onClick期望传递给它的函数，bind有效，因为它创建了一个函数的副本。相反，我们可以传递一个只调用我们想要的函数的箭头函数表达式，并保留this。您永远不需要在React中绑定render方法，但如果由于某种原因您在某个组件方法中丢失this：
constructor(props) {
super(props);
this.myMethod = this.myMethod.bind(this);
}
答案 2 :(得分：98)
这里有很好的答案，我同意@Austin Greco（第二个选项有单独的组件）
还有另外一种方式，currying
你可以做的是创建一个接受参数（你的参数）的函数，并返回另一个接受另一个参数的函数（在这种情况下是click事件）。那么你随心所欲地随心所欲。
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
};
你将以这种方式使用它：
<input
type="text"
onChange={this.handleChange(someParam)}
/>
以下是此类用法的完整示例：
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>
请注意，此方法无法解决在每个渲染上创建新实例的问题 我喜欢这种方法而不是其他内联处理程序，因为在我看来，这个方法更简洁，更易读。
修改
如下面的注释所示，您可以缓存/记忆函数的结果。
这是一个天真的实现：
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" />
答案 3 :(得分：64)
[[评论中linking this的@ E.Sundin）
最佳答案（匿名函数或绑定）将起作用，但它不是最高效的，因为它为map()函数生成的每个实例创建了事件处理程序的副本。
项目清单
渲染中渲染的常见用例是渲染列表时的情况 每个列表项单独回调：
const List = props => (
<ul>
{props.items.map(item =>
<li key={item.id} onClick={() => console.log(item.id)}>
...
</li>
)}
</ul>
);
不是这样做，而是将重复的部分拉到自己的部分 成分：
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>
);
});
这将加快渲染速度，因为它避免了创建新渲染的需要 每个渲染上的函数（通过绑定调用）。
答案 4 :(得分：20)
这是我的方法，不确定它有多糟糕，请发表评论
在可点击元素
中return (
<th value={column} onClick={that.handleSort} data-column={column}> {column}</th>
);
然后
handleSort(e){
this.sortOn(e.currentTarget.getAttribute('data-column'));
}
答案 5 :(得分：13)
这个例子可能与你的有点不同。但我可以向您保证，这是您可以解决此问题的最佳解决方案。 我已经搜索了几天没有性能问题的解决方案。最后想出了这个。
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>
);
}
}
<强>更新
因为你想要处理那些应该是参数的对象。您可以使用JSON.stringify(object)将其转换为字符串并添加到数据集。
return (
<div>
<h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
{this.state.name}
</h3>
</div>
);
答案 6 :(得分：5)
只需创建一个这样的函数
function methodName(params) {
//the thing you wanna do
}
并在需要的地方调用它
< 图标 onClick = { （）=> { methodName（theParamsYouwantToPass）; } } / >
答案 7 :(得分：4)
不涉及.bind或ES6的另一个选项是使用带有处理程序的子组件来调用具有必要props的父处理程序。这是一个例子（下面是工作示例的链接）：
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);
}
}
});
基本思想是父组件将onClick函数传递给子组件。子组件调用onClick函数并可以访问传递给它的任何props（以及event），允许您使用父级中的任何event值或其他道具onClick功能。
这是显示此方法的CodePen demo。
答案 8 :(得分：3)
class extends React.Component {
onClickDiv = (column) => {
// do stuff
}
render() {
return <div onClick={() => this.onClickDiv('123')} />
}
}
答案 9 :(得分：2)
我发现在不使用内联函数的情况下调用具有多个参数的 onClick、onChange 等函数的最简洁方法是使用 React 16 及更高版本中提供的自定义 data 属性。
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" />
)
}
以上示例针对的是功能组件，但即使在类组件中，实现也非常相似。
这种方法不会产生不必要的重新渲染，因为您没有使用内联函数，并且可以避免使用 this 进行绑定的麻烦。
它允许您传递任意数量的值，只要您想在函数中使用。
如果您将值作为道具传递给子组件以在子组件的 onClick 中使用，您也可以在那里使用这种方法，而无需创建包装函数。
也适用于对象数组，如果您想将 id 从对象传递到 onClick，如下所示。
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>
)
}
答案 10 :(得分：2)
我编写了一个可以为此目的重用的包装器组件，它基于此处接受的答案。如果您需要做的只是传递一个字符串，那么只需添加一个数据属性并从e.target.dataset中读取它（就像其他人建议的那样）。默认情况下，我的包装器将绑定到任何作为函数的prop并以'on'开头，并在所有其他事件参数之后自动将数据prop传递回调用者。虽然我没有测试它的性能，但它会让你有机会避免自己创建类，它可以像这样使用：
const DataButton = withData('button')
const DataInput = withData('input');
或用于组件和功能
const DataInput = withData(SomeComponent);
或者如果您愿意
const DataButton = withData(<button/>)
声明您的容器外（靠近您的导入）
以下是容器中的用法：
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>
);
}
}
这是包装代码'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;
}, {});
}
答案 11 :(得分：2)
我已经通过两种方式将onclick事件值传递的代码添加到方法中。 1。使用bind方法2.使用arrow（=＆gt;）方法。请参阅方法handleort1和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>);
}
});
答案 12 :(得分：2)
我意识到这对于聚会来说还很晚，但是我认为一个更简单的解决方案可以满足许多用例：
handleEdit(event) {
let value = event.target.value;
}
...
<button
value={post.id}
onClick={this.handleEdit} >Edit</button>
我想您也可以使用data-属性。
简单，语义。
答案 13 :(得分：1)
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>
);
}
}
答案 14 :(得分：1)
有两种方法可以在事件处理程序中传递参数，
您可以使用箭头函数来包装事件处理程序并传递参数：
Set GOOS=linux //(if your server is linux)
go build web\main.go
上面的示例等效于调用<button onClick={() => this.handleClick(id)} />
，也可以显式调用bind。
.bind除了这两种方法，您还可以将参数传递给定义为curry函数的函数。
<button onClick={this.handleClick.bind(this, id)} />
答案 15 :(得分：1)
有一个非常简单的方法。
onClick={this.toggleStart('xyz')} .
toggleStart= (data) => (e) =>{
console.log('value is'+data);
}
答案 16 :(得分：1)
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);
}
答案 17 :(得分：1)
我猜你必须将方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在您将参数传递给方法的情况下，第一个参数用于绑定方法的“this”上下文，因此您无法访问方法内的值。
答案 18 :(得分：1)
下面是在onClick事件上传递值的示例。
我使用了es6语法。记得在类组件中箭头函数没有自动绑定，所以在构造函数中显式绑定。
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>
);
}
}
答案 19 :(得分：1)
如果您使用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>
);
}
}
答案 20 :(得分：1)
使用箭头功能：
您必须安装stage-2：
npm install babel-preset-stage-2：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value=0
}
}
changeValue = (data) => (e) => {
alert(data); //10
this.setState({ [value]: data })
}
render() {
const data = 10;
return (
<div>
<input type="button" onClick={this.changeValue(data)} />
</div>
);
}
}
export default App;
答案 21 :(得分：1)
替代尝试回答OP的问题，包括e.preventDefault（）调用：
呈现链接（ ES6 ）
<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>
组件功能
handleSort = (e, param) => {
e.preventDefault();
console.log('Sorting by: ' + param)
}
答案 22 :(得分：1)
我在JSX onClick Events上有以下3个建议 -
实际上，我们不需要在代码中使用.bind（）或Arrow函数。您可以在代码中使用它。
您还可以将onClick事件从th（或ul）移至tr（或li）以提高性能。基本上你会有n个＆＃34;事件听众＆＃34;为了你的元素。
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>
//您可以使用item.id方法访问onItemClick，如下所示：
onItemClick = (event) => {
console.log(e.target.getAttribute("item.id"));
}
我同意上面提到的为ListItem和List创建单独的React组件的方法。这使代码看起来不错，但是如果你有1000个li，那么将创建1000个事件监听器。请确保您不应该有太多的事件监听器。
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>
);
}
}
答案 23 :(得分：0)
在真空中有很多性能方面的考虑。
该处理程序的问题在于，您需要对它们进行咖喱处理，以便将无法命名的参数纳入道具中。
这意味着该组件需要为每个可单击元素提供一个处理程序。我们同意对于几个按钮来说这不是问题，对吧？
当您处理具有数十列和数千行的表格数据时，会出现问题。在这里，您会注意到创建那么多处理程序的影响。
事实是，我只需要一个。
我在表级别（或UL或OL ...）上设置了处理程序，单击发生时，我可以使用事件对象中一直可用的数据来判断哪个是被单击的单元格：
nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent
我使用标记名字段检查单击是否发生在有效元素中，例如忽略页脚中的单击。
rowIndex和cellIndex给出了单击的单元格的确切位置。
Textcontent是单击的单元格的文本。
通过这种方式，我不需要将单元格的数据传递给处理程序，它可以对它进行自助服务。
如果需要更多数据（不显示的数据），则可以使用数据集属性或隐藏元素。
有了一些简单的DOM导航，一切就在手边。
自从PC变得更容易沼泽以来，就一直在HTML中使用它。
答案 24 :(得分：0)
这个问题冒出来，但我认为.bind可以解决问题。在下面找到示例代码。
const handleClick = (data) => {
console.log(data)
}
<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>
答案 25 :(得分：0)
我会这样做：
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>
}
答案 26 :(得分：0)
您可以这样使用代码：
<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>
如果您要在句柄函数中使用preventDefault()之类的事件方法，或者要获取e.target.name之类的目标值或名称，则e用于事件对象。
答案 27 :(得分：0)
我发现将param作为标签属性传递的解决方案很合理。
但是它有局限性：
这就是我想出这个库的原因：https://github.com/sneas/react-event-param
它：
用法示例：
import { setEventParam, getEventParam } from "react-event-param";
class List extends Component {
onItemClick = e => {
const index = getEventParam(e.target);
// Do something with index
};
render() {
return (
<ul>
{this.props.items.map((itemText, index) => (
<li
key={index}
{...setEventParam(index)}
onClick={this.onItemClick}
>
{{ itemText }}
</li>
))}
</ul>
);
}
}
export default List;
答案 28 :(得分：0)
有三种方法可以解决这个问题： -
将构造函数中的方法绑定为： -
export class HeaderRows extends Component {
constructor() {
super();
this.handleSort = this.handleSort.bind(this);
}
}
创建时使用箭头功能： -
handleSort = () => {
// some text here
}
第三种方式是： -
<th value={column} onClick={() => that.handleSort} >{column}</th>
答案 29 :(得分：-1)
您只需要使用Arrow函数来传递值。
<button onClick={() => this.props.onClickHandle("StackOverFlow")}>
请务必使用（）=>，否则将在没有点击事件的情况下调用click方法。
注意：崩溃会检查默认方法
请在下面的codeandbox中找到相同的运行代码。
答案 30 :(得分：-1)
使用 this.handleSort。 js 中没有关键字 that。谢谢兄弟。
onClick={this.handleSort}
答案 31 :(得分：-2)
需要简单更改：
使用
true
而不是
gcc -ffast-math
答案 32 :(得分：-2)
使用关闭，可以得到一个干净的解决方案：
<th onClick={this.handleSort(column)} >{column}</th>
handleSort函数将返回一个已经设置了 column 值的函数。
handleSort: function(value) {
return () => {
console.log(value);
}
}
当用户单击th时，将使用正确的值调用匿名函数。
示例：https://stackblitz.com/edit/react-pass-parameters-example
答案 33 :(得分：-2)
我认为，在React的地图中.bind(this, arg1, arg2, ...) - 是错误的代码，因为它很慢！单个渲染方法中的.bind(this)的10-50 - 代码非常慢。
我这样修理：
渲染方法
<tbody onClick={this.handleClickRow}>
<tr data-id={listItem.id}>的地图
处理程序
var id = $(ev.target).closest('tr').data().id
以下完整代码：
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>
答案 34 :(得分：-19)
在这种情况下，我建议curry over bind。喜欢，
return (
<th value={column} onClick={this.handleSort.curry(column)} {column}</th>
);