我想读取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事件传递值？
我编写了一个包装器组件，可用于此目的，该组件基于此处接受的答案。如果你只需要传递一个字符串，那么只需添加一个数据属性并从e.target.dataset中读取它（就像其他人建议的那样）。默认情况下，我的包装器将绑定到任何以“on”开头的属性，并在所有其他事件参数之后自动将数据属性传递回调用者。虽然我还没有测试过它的性能，但它会让您有机会避免自己创建类，并且可以这样使用：
const DataButton=带数据（“按钮”）
const DataInput=with Data（'input'）；
或组件和功能
const DataInput=with Data（SomeComponent）；
或者如果你愿意
const DataButton=with Data（<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;
}, {});
}
有很多性能方面的考虑，都是在真空中。这个处理程序的问题是，您需要讨好它们，以便将无法在props中命名的参数合并进来。这意味着组件需要每个可单击元素的处理程序。让我们同意，对于几个按钮来说，这不是问题，对吧？当您处理具有数十列和数千行的表格数据时，就会出现问题。在这里，您会注意到创建这么多处理程序的影响。
事实是，我只需要一个。我将处理程序设置在表级别（或UL或OL…），当单击发生时，我可以使用事件对象中的可用数据来判断单击的单元格：
nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent
我使用标记名字段检查单击是否发生在有效元素中，例如忽略页脚中的单击。rowIndex和cellIndex提供了所单击单元格的确切位置。Textcontent是单击单元格的文本。
这样，我不需要将单元格的数据传递给处理程序，它可以自助处理。如果我需要更多的数据，不需要显示的数据，我可以使用dataset属性或隐藏元素。通过一些简单的DOM导航，一切都在手边。自从PC更容易陷入困境以来，HTML中就一直使用这种方式。
