React中如何通过useLongPress的bind对象给onCancel回调传参

有两种常用的实现方式可以满足你的需求：

方式1：在列表渲染循环内调用useLongPress（最直接） #

你当前将useLongPress放在组件顶层声明，所有按钮共用同一个绑定对象，自然无法传递每个按钮独有的preset参数。把hook调用移到map循环内部，给每个按钮生成专属的绑定配置，就可以通过闭包直接拿到当前遍历的preset：

const Presets = ({presetsList: presets, presetStart: start}) => {
  return (
    <section onContextMenu={(e)=> e.preventDefault()}>
      {presets.map((preset, index) => {
        // 每个按钮单独创建长按/短按回调，通过闭包直接获取当前preset
        const longPress = () => {
          console.log('long click or long press');
          // 其他业务逻辑
        }
        const shortPress = () => {
          console.log('single click or tap');
          start(preset);
        }
        const bind = useLongPress(longPress, {onCancel: shortPress});
        
        return <button 
          key={index} 
          {...bind} 
          type="button" 
        >
          <span>{preset.time}</span>
        </button>
      })}
    </section>
  )
}

export default Presets;

这个方案逻辑直观，只要你的列表长度不会特别大（比如超过上百个），不会有明显性能问题。

方式2：通过元素dataset传递参数（适合列表项多的场景） #

如果你不想在循环内调用hook，可以把preset的相关数据存到按钮的自定义数据属性上，在shortPress回调里从事件对象读取：

const Presets = ({presetsList: presets, presetStart: start}) => {
  const longPress = (event) => {
    const preset = JSON.parse(event.target.dataset.preset);
    console.log('long click or long press', preset);
    // 其他业务逻辑
  }

  const shortPress = event => {
    // 从事件目标的dataset读取预设数据
    const preset = JSON.parse(event.target.dataset.preset);
    console.log('single click or tap');
    start(preset);
  }
  
  const bind = useLongPress(longPress, {onCancel: shortPress});
    
  return (
    <section onContextMenu={(e)=> e.preventDefault()}>
      {presets.map((preset, index) => {
        return <button 
                    key={index} 
                    data-preset={JSON.stringify(preset)}
                    {...bind} 
                    type="button" 
                >
                    <span>{preset.time}</span>
                </button>
      })}
    </section>
  )
}

export default Presets;

如果preset存在唯一id，也可以只存id到dataset，回调里再根据id从presets数组查找对应对象，不需要序列化整个对象。

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