React函数组件点击按钮/ListItem时如何获取自定义category参数？

问题原因 #

1. React组件的自定义非标准属性默认不会挂载到真实DOM节点上，你直接给ListItem传的category属性不属于原生DOM支持的标准属性，所以无法通过事件对象的DOM节点直接读取到该属性值。
2. 事件对象的target属性指向实际触发点击的最内层元素，如果ListItem内部有嵌套的子元素，点击时target可能不是绑定事件的ListItem根节点，也会导致取值失败。

解决方案 #

方法1：使用标准data-*自定义属性（适合不需要修改事件绑定逻辑的场景） #

把自定义属性改成符合HTML规范的data-*格式，同时用e.currentTarget获取绑定事件的元素，避免target指向子元素的问题：

function Portfolio() {
  const handleClick = (e) => {
    // currentTarget指向绑定onClick的ListItem根节点，dataset里存储所有data-*属性
    console.log(e.currentTarget.dataset.category)
  }
  return (
    <Section>
      <Title><TitleSpan>My</TitleSpan> Portfolio</Title>
      <List>
        {/* 把category改为data-category */}
        <ListItem active data-category="all" onClick={handleClick}>All</ListItem>
        <ListItem data-category="html" onClick={handleClick}>HTML</ListItem>
        <ListItem data-category="photoshop" onClick={handleClick}>Photoshop</ListItem>
        <ListItem data-category="wordpress" onClick={handleClick}>Wordpress</ListItem>
        <ListItem data-category="mobile" onClick={handleClick}>Mobile</ListItem>
      </List>
    </Section>
  )
}

注意如果ListItem是你自定义的组件，需要确保它把所有透传的属性以及onClick事件绑定到内部的根DOM节点上，否则data属性也不会挂载到真实DOM上。

方法2：绑定事件时直接传参（逻辑更直观，不需要操作DOM属性） #

直接在绑定点击事件的时候把category值作为参数传入处理函数，不需要依赖事件对象取值：

function Portfolio() {
  // 直接接收category参数
  const handleClick = (category) => {
    console.log(category)
  }
  return (
    <Section>
      <Title><TitleSpan>My</TitleSpan> Portfolio</Title>
      <List>
        {/* 箭头函数包装一层，传入对应category值 */}
        <ListItem active onClick={() => handleClick("all")}>All</ListItem>
        <ListItem onClick={() => handleClick("html")}>HTML</ListItem>
        <ListItem onClick={() => handleClick("photoshop")}>Photoshop</ListItem>
        <ListItem onClick={() => handleClick("wordpress")}>Wordpress</ListItem>
        <ListItem onClick={() => handleClick("mobile")}>Mobile</ListItem>
      </List>
    </Section>
  )
}

内容的提问来源于stack exchange，提问作者Mona Omar