React开发抽奖应用点击下拉菜单按钮如何传递选中日期参数

实现逻辑 #

通过给遍历生成的下拉选项按钮绑定箭头函数形式的点击事件，直接将当前遍历到的日期作为参数传入处理函数即可，同时修正你现有代码的几个问题。

修改后完整代码 #

// 日期选中的处理函数，接收选中的日期作为入参
const handleDateSelect = (selectedDate) => {
  // 此处可直接使用拿到的日期参数发起API请求或做其他业务处理
  console.log('选中的日期：', selectedDate)
}

// 下拉菜单渲染代码
<div className="btn-group">
 <div className="dropdown">
   <button type="button" className="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" 
   data-bs-display="static" aria-expanded="false">
    Sorteos Anteriores
   </button>
    <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {/* 修正map参数命名：第一个参数为数组当前项（日期），第二个为索引 */}
          {PrevDraws.map((date, i) => (
        <li key={i}> 
          {/* 绑定点击事件，通过箭头函数传入当前日期 */}
          <button className="dropdown-item" type="button" onClick={() => handleDateSelect(date)}>       
            {date}
          </button>
        </li>
      ))}
    </ul>
  </div>
</div>

注意事项 #

• 原代码里按钮的class属性要改为React标准的className，否则会触发控制台警告
• 如果你的日期数组存在重复值，建议将key替换为唯一标识，避免渲染异常
• 不需要通过自定义DOM属性存储日期值，箭头函数直接传参的方式更符合React的写法逻辑

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