我想阅读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
事件?
22 回答
我想,在React的 Map 中
.bind(this, arg1, arg2, ...)
是不好的代码,因为它很慢!单渲染方法中.bind(this)
的10-50 - 代码非常慢 .我解决这个问题:
渲染方法
<tbody onClick={this.handleClickRow}>
<tr data-id={listItem.id}>
的 Map处理器
var id = $(ev.target).closest('tr').data().id
完整代码如下:
这里有很好的答案,我同意@Austin Greco(第二个选项有单独的组件),但我很惊讶没有人提到currying .
你可以做的是创建一个接受参数(你的参数)的函数,并返回另一个接受另一个参数的函数(在这种情况下是click事件) . 然后你随心所欲地随心所欲 .
ES5:
ES6:
你将这样使用它:
以下是此类用法的完整示例:
请注意,此方法不能解决在每个渲染上创建新实例的问题 .
我喜欢这种方法优于其他内联处理程序,因为在我看来,这个方法更简洁,更易读 .
Edit:
如下面的注释所示,您可以缓存/记忆函数的结果 .
这是一个天真的实现:
[[h / t @ E.Sundin for linking this in a comment]
最佳答案(匿名函数或绑定)将起作用,但它不是最高效的,因为它为
map()
函数生成的每个实例创建事件处理程序的副本 .这是对ESLint-plugin-react中最佳方法的解释:
如果您使用
ES6
,则可以执行此操作 .有三种方法可以解决这个问题: -
我已经通过两种方式将onclick事件值传递的代码添加到方法中 . 1 . 使用bind方法2.使用箭头(=>)方法 . 请参阅方法handleort1和handleort
下面是在onClick事件上传递值的示例 .
我使用es6语法 . 记得在类组件中箭头函数没有自动绑定,所以在构造函数中显式绑定 .
我想你必须将方法绑定到React的类实例 . 使用构造函数绑定React中的所有方法更安全 . 在您将参数传递给方法的情况下,第一个参数用于绑定方法的“this”上下文,因此您无法访问方法内的值 .
Theres是一个非常简单的方法 .
交替尝试回答OP的问题,包括e.preventDefault()调用:
渲染链接( ES6 )
组件功能
这是我的方法,不确定它有多糟糕,请评论
在可点击元素中
然后
我编写了一个可以为此目的重用的包装器组件,它基于此处接受的答案 . 如果您需要做的只是传递一个字符串,那么只需添加一个数据属性并从e.target.dataset中读取它(就像其他人建议的那样) . 默认情况下,我的包装器将绑定到任何作为函数的prop并以'on'开头,并在所有其他事件参数之后自动将数据prop传递回调用者 . 虽然我没有测试它的性能,但它会让你有机会避免自己创建类,它可以像这样使用:
const DataButton = withData('button')
const DataInput = withData('input');
或者用于组件和功能
const DataInput = withData(SomeComponent);
或者如果你愿意的话
const DataButton = withData(<button/>)
声明你的容器外面(靠近你的进口)
这是容器中的用法:
这是包装代码'withData.js:
我在JSX onClick事件上有以下3个建议 -
实际上,我们不需要在代码中使用.bind()或Arrow函数 . 您可以在代码中使用它 .
您还可以将onClick事件从th(或ul)移至tr(或li)以提高性能 . 基本上,你的n li元素将有n个“事件监听器” .
//你可以在
onItemClick
方法中访问item.id
,如下所示:简单方法
使用箭头功能:
这将创建一个新函数,使用正确的参数调用
handleSort
.更好的方式
Extract it into a sub-component.在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数,最终导致不需要的重新渲染 .
如果你创建一个子组件,你可以传递处理程序并使用props作为参数,然后只有当props更改时才重新呈现(因为处理程序引用现在永远不会改变):
子组件
主要部分
Old Easy Way (ES5)
使用.bind传递所需的参数:
使用箭头功能:
您必须安装stage-2:
npm install babel-preset-stage-2:
在这种情况下,我会建议curry over bind . 喜欢,
如今,有了ES6,我觉得我们可以使用更新的答案 .
基本上,(对于任何不知道的),因为
onClick
期望传递给它的函数,bind
可以工作,因为它创建了一个函数的副本 . 相反,我们可以传递一个只调用我们想要的函数的箭头函数表达式,并保留this
. 你永远不需要在React中绑定render
方法,但如果由于某种原因你在一个组件方法中丢失this
:不涉及
.bind
或ES6的另一个选项是使用带有处理程序的子组件来使用必要的道具调用父处理程序 . 这是一个例子(以下是工作示例的链接):基本思想是父组件将
onClick
函数传递给子组件 . 子组件调用onClick
函数并且可以访问传递给它的任何props
(以及event
),允许您在父的onClick
函数中使用任何event
值或其他道具 .这是一个显示此方法的CodePen demo .
通过将count作为参数从主要组件传递到子组件来实现对象的显示总计数,如下所述 .
这是MainComponent.js
这是
SubComp.js
尝试在上面实现,你会得到一个确切的场景,即如何在任何DOM方法的reactjs中传递参数 .
这个例子可能与你的有点不同 . 但我可以向您保证,这是您可以解决此问题的最佳解决方案 . 我已经搜索了几天没有性能问题的解决方案 . 最后想出了这一个 .
UPDATE
如果您想处理应该是参数的对象 . 您可以使用
JSON.stringify(object)
将其转换为字符串并添加到数据集 .