如何解决在 React js 中为按钮带来属性
我正在尝试构建一个预订应用程序,谁能建议我如何将表格中的属性带到按钮?
例如: 当用户单击第一个日程表上的选择按钮时,第一行的日程表 ID 和训练 ID 将被带到选择按钮以执行操作。非常感谢任何提示和帮助!
渲染表: **booking() 是我的操作
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>
)
}
解决方法
只需将一个函数传递给您的 numbersObject: { [x: string]: string } = {
'1': '١','2': '٢','3': '٣','4': '٤','5': '٥','6': '٦','7': '٧','8': '٨','9': '٩','0': '٠',};
transform(n: number | string): string {
if (n === null || n === undefined) return '';
n = n + ''; // to make it a string if it was a number
let newString = '';
for (let i = 0; i < n.length; i++) {
if (this.numbersObject[n.charAt(i)])
newString += this.numbersObject[n.charAt(i)];
else
newString += n.charAt(i);
}
return newString;
}
,它会使用参数调用您的自定义处理程序:
onClick
如果 const bookBtn = (trainer_id,schedule_id) => {
return(
<Button onClick={() => booking(trainer_id,schedule_id)} variant="danger">
Select
</Button>
);
}
确实是一个处理程序,当然。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。