Question

我有以下组件

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而不绑定我该怎么办？

Answer 1

使用箭头功能。

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

Answer 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>
    );
}

Answer 3

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

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

获取点击ES6 React的关键索引

4 个答案: