Reactjs 如何将子组件中的{todo.id}发送到父组件'；谁是处理者？

我可以确认我的处理程序正在接收事件，但我希望能够引用处理程序中附加的锚标记的实际

键={todo.id}

（或者只是

{todo}

），因为我希望将其作为设置我的状态的引用。有人能告诉我怎么做吗

import React from 'react';

const Todo = props => (
    <div>
       <ul className = "list-group">
       {props.todos.map(todo => {
          return <li className = "list-group-item" key ={todo.id}>{todo.text}<a onClick={props.onDelete}
          className="glyphicon glyphicon-trash" href="#"></a></li>
         })
        }
       </ul>
    </div>
);

export default Todo;

---

提前谢谢你的帮助

例如，您可以为每个todo创建一个新的内联箭头函数，并通过以下方式将

todo

作为参数传递给

onDelete

：

<a
  onClick={() => props.onDelete(todo)}
  className="glyphicon glyphicon-trash"
  href="#"
/>

---

例如，您可以为每个todo创建一个新的内联箭头函数，并通过以下方式将

todo

作为参数传递给

onDelete

：

<a
  onClick={() => props.onDelete(todo)}
  className="glyphicon glyphicon-trash"
  href="#"
/>

---

嘿，@Tholle/其他稍后读到这篇文章的人，我把它收回。您使我能够以锚定标记的id为目标，但不能以实际的

todo

项为目标。我做了以下调整：

onClick={（）=>props.onDelete（todo.id）}

然后在我的处理程序中：

handleDelete（id）{console.log（'delete clicked'，id）；}

这就像我想要的那样针对实际项目的id。干杯。@SamuelWarren我答案中的第一个示例将todo项传递给

onDelete

方法，第二个示例传递id。我以为这就是你想要的。嘿，@Tholle/其他稍后阅读此内容的人，我收回这一点。您使我能够以锚定标记的id为目标，但不能以实际的

todo

项为目标。我做了以下调整：

onClick={（）=>props.onDelete（todo.id）}

然后在我的处理程序中：

handleDelete（id）{console.log（'delete clicked'，id）；}

这就像我想要的那样针对实际项目的id。干杯。@SamuelWarren我答案中的第一个示例将todo项传递给

onDelete

方法，第二个示例传递id。我以为这就是您想要的。

<a
  onClick={props.onDelete}
  className="glyphicon glyphicon-trash"
  href="#"
  data-id={todo.id}
/>

// ...

handleDelete(event) {
  const todoId = event.target.dataset.id;
  console.log(todoId);
}