如何从事件 object 中检索 React 属性

Question

如何从事件中轻松检索 React 组件中的属性集 object？

最小可验证完整示例

假设以下组件发生 click 事件。是一个table中的一个header； onClick 调用 sortRequest，这是一个函数，用于根据单击的 header 对 collection 进行排序。我需要 sort_key 来知道要对哪一列进行排序：

<TableCell sort_key={sort_key} onClick={sortRequest}>{name}</TableCell>

在事件处理程序中，我需要从事件 object 中获取 sort_key，以便我可以根据用户 header 对 collection 进行排序点击了，但是在事件 object 属性中找不到它！

const sortRequest = (e) => {
    // HERE: Where in e is the sort_key property?
}

现在我在 outerHTML 上求助于字符串操作，如下所示：

const sortRequest = (e) => {
    let s = e.currentTarget.outerHTML
    let start = s.indexOf("sort_key") + 10
    let finish = s.indexOf("\"", start)
    sort_field = s.substring(start, finish)
}

...但这很麻烦；我觉得必须有更好的方法。 Tyvm 基思:^)

Answer 1

您可以将 sort_key 作为参数传递给 onClick 事件处理程序

<TableCell sort_key={sort_key} onClick={() => sortRequest(sort_key)}>{name}</TableCell>

const sortRequest = key => {
  console.log(key)
}

如何从事件 object 中检索 React 属性

How to retrieve a React property from an event object

properties

event-handling

reactjs