use*_*375 563 javascript reactjs
我想阅读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>
);
}
});
如何将值传递给onClickReact js中的事件？
Aus*_*eco 1159
使用箭头功能:
return (
<th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);
这将创建一个handleSort使用正确的参数调用的新函数.
将其解压缩为子组件. 在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数,最终导致不需要的重新渲染.
如果你创建一个子组件,你可以传递处理程序并使用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>
);
Sag*_*b.g 122
这里有很好的答案,我同意@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" />aik*_*eru 112
如今,有了ES6,我觉得我们可以使用更新的答案.
return (
<th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);
基本上,(对于任何不知道的人)因为onClick期望传递给它的函数,bind因为它创建了函数的副本.相反,我们可以传递一个箭头函数表达式,它只是调用我们想要的函数,并保留this.您永远不需要render在React中绑定该方法,但如果由于某种原因您this在某个组件方法中丢失:
constructor(props) {
super(props);
this.myMethod = this.myMethod.bind(this);
}
Bra*_*don 70
[[h/t @ E.Sundin 在评论中链接此内容 ]
最顶层的答案(匿名函数或绑定)将起作用,但它并不是最高效的,因为它为map()函数生成的每个实例创建了事件处理程序的副本.
这是对从ESLint-plugin-react执行此操作的最佳方式的解释:
物品清单
渲染中的一个常见用例是渲染列表时,每个列表项都有一个单独的回调:
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>
);
});
这将加速渲染,因为它避免了在每个渲染上创建新函数(通过绑定调用)的需要.
Tom*_*dil 34
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>
)
}
您可以将函数传递给 useCallback 的返回，然后可以通过向其传递参数来在渲染中正常调用您的函数。奇迹般有效！只需确保正确设置 useCallback 的依赖项数组即可。
我发现在 onClick、onChange 等中调用具有多个参数的函数而不使用内联函数的最简洁方法是使用dataReact 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" />
)
}
上面的示例适用于功能组件，但即使在类组件中，实现也非常相似。
这种方法不会产生不必要的重新渲染，因为您没有使用内联函数，并且避免了与this.
它允许您传递您想要在函数中使用的任意数量的值。
如果您将值作为 props 传递给子组件以在子组件的 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>
)
}
San*_*rez 23
这是我的方法,不确定它有多糟糕,请评论
在可点击元素中
return (
<th value={column} onClick={that.handleSort} data-column={column}> {column}</th>
);
然后
handleSort(e){
this.sortOn(e.currentTarget.getAttribute('data-column'));
}
han*_*man 17
这个例子可能与你的有点不同.但我可以向您保证,这是您可以解决此问题的最佳解决方案.我已经搜索了几天没有性能问题的解决方案.最后想出了这一个.
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>
);
}
}
UPDATE
如果你想处理应该是参数的对象.您可以使用JSON.stringify(object)它转换为字符串并添加到数据集.
return (
<div>
<h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
{this.state.name}
</h3>
</div>
);
class extends React.Component {
onClickDiv = (column) => {
// do stuff
}
render() {
return <div onClick={() => this.onClickDiv('123')} />
}
}
简单地创建一个这样的函数
function methodName(params) {
//the thing you wanna do
}
并在您需要的地方调用它
<Icon onClick = {() => { methodName(theParamsYouwantToPass);} }/>
我意识到这对派对来说已经很晚了，但我认为一个更简单的解决方案可以满足许多用例：
handleEdit(event) {
let value = event.target.value;
}
...
<button
value={post.id}
onClick={this.handleEdit} >Edit</button>
我想你也可以使用一个data-属性。
简单，语义。
交替尝试回答 OP 的问题，包括 e.preventDefault() 调用：
渲染链接 ( ES6 )
<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>
组件功能
handleSort = (e, param) => {
e.preventDefault();
console.log('Sorting by: ' + param)
}
.bind另一种不涉及ES6 的选项是使用带有处理程序的子组件来调用具有必要道具的父处理程序。这是一个示例（下面是工作示例的链接）：
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 演示，展示了此方法的实际应用。
小智 5
如果您正在使用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>
);
}
}
有几种方法可以在事件处理程序中传递参数，其中一些方法如下。
您可以使用箭头函数来包装事件处理程序并传递参数：
<button onClick={() => this.handleClick(id)} />
上面的例子相当于调用.bind或者你可以显式调用bind。
<button onClick={this.handleClick.bind(this, id)} />
除了这两种方法之外，您还可以将参数传递给定义为 curry 函数的函数。
handleClick = (id) => () => {
console.log("Hello, your ticket number is", id)
};
<button onClick={this.handleClick(id)} />
| 归档时间： |
|
| 查看次数： |
456796 次 |
| 最近记录： |