React函数组件中如何正确触发map渲染生成的li的onClick事件

问题原因 #

你给<li>的onClick事件绑定的是函数执行结果，而非事件触发时要调用的函数本身。组件渲染遍历statusList生成列表项时，handleSelect就已经被依次调用了，所以才会一打开菜单就批量打印所有label值，点击对应项时反而没有预期的触发逻辑。

修复方案 #

把onClick的绑定逻辑包裹一层箭头函数，仅在点击事件触发时再执行handleSelect并传入对应项的值即可：

export const ActionsSelectMenu = () => {
  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
  const statusList = [{ label: "aaaa", value: "Aaaa aaa aaa" }, { label: "bbb", value: "bbb bbb bb " }];

  const SelectMenu = () => {
    const handleSelect = (selectedItem) => {
      console.log(selectedItem)
    }

    return <ul className="select-field-container">
              {statusList.map((el, i) => {
                // 改动点：onClick绑定箭头函数，点击时才触发handleSelect
                return <li className={el.label} key={el.label} onClick={() => handleSelect(el.label)}>{el.value}</li>
              })}
          </ul>
  }

  return (
    <RowOptions>
      <Img id="optionsMenuImage" src={overflowIcon} onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)} />
      {isOptionsMenuOpen && <SelectMenu />}
    </RowOptions>
  )
}

可选优化 #

当前你把SelectMenu组件定义在ActionsSelectMenu内部，每次父组件重渲染时都会重新生成SelectMenu的实例，触发不必要的卸载重渲染。可以把SelectMenu移到组件外部，将statusList和选中回调通过props传入，能提升运行性能。

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