点击 ES6 React 获取关键索引答案

【问题标题】：Get Key Index on Click ES6 React点击 ES6 React 获取关键索引
【发布时间】：2017-02-23 23:39:59
【问题描述】：

我有以下组件

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 并且没有绑定我怎么能做到这一点？

【问题讨论】：

"无绑定" 为什么？ :)
@yury ：看起来这不是最佳实践 - 请参阅 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…
有道理。您为什么不想按照他们的建议为列表项使用单独的组件？
React js onClick can't pass value to method的可能重复

标签： reactjs ecmascript-6

【解决方案1】：

使用箭头函数。

onClick={() => handler(index)}

【讨论】：

如果使用eslint插件，不建议使用箭头功能
然后你必须为你的组件创建新项目并将 index 属性传递给它。
这是一个软“坏习惯”，因为每次渲染元素都会创建一个新函数，在某些情况下可能会导致双重渲染。
正确的方法可以在这里找到：stackoverflow.com/questions/29810914/…
请尽量避免使用匿名函数。

【解决方案2】：

您实际上可以在不使用箭头函数的情况下获取索引。您唯一需要做的就是将索引作为属性传递并从事件中获取该值作为 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>
    );
}

【讨论】：

为什么这比上面接受的答案更好？
@Hamund 来自 google “如果你在 render 中使用箭头函数，每次调用 render 都会创建新的函数对象。如果你通过 props 将这些函数传递给子元素，基于 PureComponent 或 shouldComponentUpdate 的优化将失败（因为箭头功能道具会在每次渲染时发生变化）。” - 因此，如果您喜欢性能，那么最好将 ref 传递给函数而不是箭头函数。
@SallyRothroat：这不起作用，因为 event.target 可以是
元素内的任何元素。

更改为currentTarget

【解决方案3】：

您可以将子项中的索引设置为 data-index，然后使用 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>
    )
});

【讨论】：

【解决方案4】：

这也有效：

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>
}

【讨论】：