我正在 React 中构建一个实体列表。每个实体都包含在链接中并重定向到页面。每个实体的链接内都有一个复选框和一个打开下拉菜单的按钮:
<ul>
<li>
<Link to={url}>
<label>
<input type="checkbox" />
</label>
<h3>Entity name</h3>
<time datetime="">2019-09-21</time>
<button type="button">Dropdown</button>
</Link>
</li>
</ul>
如果用户单击复选框或下拉按钮,它不应重定向到该页面,而是执行其他操作。
问题 1: 使用示例中的 anchor 标记是否可行?我不想使用 onClick
处理程序。
问题2:链接
内的复选框无法切换,see this example 。这是为什么?
最佳答案
从该示例链接中,将链接移动到仅围绕文本看起来完全相同,但可以提供您想要的内容。
<label style={{ display: "block" }}>
<input type="checkbox" />
<Link to="/">Inside the link</Link>
</label>
在可检查区域内设置复选框听起来并不是很好的用户体验 - 用户可能希望外部区域选中该复选框
关于javascript - React Router Link 内的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60000518/