将属性带到 React js 中的按钮

Question

我正在尝试在 React 中构建一个预订应用程序，有人可以建议我如何将属性从 table 带到按钮吗？

例如：当用户点击第一个时间表上的select按钮时，第一行的时间表id和训练id，将被带到select按钮上执行操作。非常感谢任何提示和帮助！

渲染table： **预订（）是我的行动

const bookBtn=(trainer_id, schedule_id)=>{

    return(
        <Button onClick={booking(trainer_id,schedule_id)} variant="danger">
        Select
    </Button> 
    )
    
}
   const renderSchedule = (details, index) => {
    return (
        <tr key={index}>
            <td>{details._id}</td>
            <td>{details.trainer}</td>
            <td>{details.date}</td>
            <td>{details.startAt}</td>
            <td>{details.endAt}</td>
            <td>
             {bookBtn(details.trainer,details._id)}
            </td>
        </tr>
    )
}

Answer 1

只需将一个函数传递给您的 onClick 即可使用参数调用您的自定义处理程序：

const bookBtn = (trainer_id, schedule_id) => {
    return(
        <Button onClick={() => booking(trainer_id, schedule_id)} variant="danger">
            Select
        </Button> 
    );
}

当然，如果 booking 确实是处理程序。

将属性带到 React js 中的按钮

Bring Properties to the button in React js

javascript

reactjs

mern