我有以下组件
const list = (props) => {
const handler = function(){
};
var listItems = props.items.map(function(item, index){
return (
<li key={index} onClick={ handler }>
{item.text}
</li>
)
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
)
}
单击时，我想获取单击的 li 的索引。使用 ES6 并且没有绑定我该怎么做？
使用箭头函数。
onClick={() => handler(index)}
您实际上可以在不使用箭头函数的情况下获取索引。您唯一需要做的就是将索引作为属性传递并从事件中获取该值作为 e.target.getAttribute("your_attribute_name")
const list = (props) => {
const handler = function(e){
console.log(e.target.getAttribute("data-index")); //will log the index of the clicked item
};
var listItems = props.items.map(function(item, index){
return (
<li key={index} data-index={index} onClick={ handler }>
{item.text}
</li>
)
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
);
}
您可以将子项中的索引设置为数据索引，然后使用 event.currentTarget.dataset.index 在处理程序函数中获取此值，这将防止在渲染中使用箭头函数时导致的重新渲染。
const handler = (event) => {
console.log(event.currentTarget.dataset.index);
};
const listItems = props.items.map((item, index) => {
return (
<li key={index} data-index={index} onClick={handler}>
{item.text}
</li>
)
});
这也有效：
const list = props => {
const handler = index => () => {
}
const listItems = props.items.map((item, index) =>
<li key={index} onClick={handler(index)}>
{item.text}
</li>)
return <div>
<ul>{listItems}</ul>
</div>
}