我想读取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事件传递值?
有很多性能方面的考虑,都是在真空中。这个处理程序的问题是,您需要讨好它们,以便将无法在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中就一直使用这种方式。
通过将count作为参数从主组件传递到子组件,实现显示对象的总计数,如下所述。
这里是MainComponent.js
import React, { Component } from "react";
import SubComp from "./subcomponent";
class App extends Component {
getTotalCount = (count) => {
this.setState({
total: this.state.total + count
})
};
state = {
total: 0
};
render() {
const someData = [
{ name: "one", count: 200 },
{ name: "two", count: 100 },
{ name: "three", count: 50 }
];
return (
<div className="App">
{someData.map((nameAndCount, i) => {
return (
<SubComp
getTotal={this.getTotalCount}
name={nameAndCount.name}
count={nameAndCount.count}
key={i}
/>
);
})}
<h1>Total Count: {this.state.total}</h1>
</div>
);
}
}
export default App;
这里是SubComp.js
import React, { Component } from 'react';
export default class SubComp extends Component {
calculateTotal = () =>{
this.props.getTotal(this.props.count);
}
render() {
return (
<div>
<p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
</div>
)
}
};
尝试实现上述内容,您将得到传递参数如何在任何DOM方法上的reactjs中工作的确切场景。
React Hooks解决方案2022
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>
)
}
您可以传递一个函数以使用Callback的返回,然后可以通过传递参数在渲染中正常调用函数!只需确保正确设置useCallback的依赖数组。
React>=16的最佳解决方案
我发现在不使用内联函数的情况下调用onClick、onChange等中具有多个参数的函数的最干净的方法是使用React 16和更高版本中提供的自定义数据属性。
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" />
)
}
上面的示例是针对功能组件的,但即使在类组件中,实现也非常相似。
这种方法不会产生不必要的重新渲染,因为您没有使用内联函数,并且可以避免使用这种方法绑定的麻烦。
它允许您在函数中传递任意数量的值。
如果要将值作为道具传递给子组件的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>
)
}