javascript - 在 ReactJS 中的 onclick 内制作 onclick
问题描述
大家好,我尝试在 onclick 中进行 onclick,我可以在没有 handleClick() 的情况下运行 clickdelete()。
这是我的代码
<div
className="row-queue"
key={index}
onClick={() => handleClick(item, index)}
style={
index === myvideoIndex ? playingcolor : playingcolor2
}
>
<div className="column1-queue">{index + 1}</div>
<div className="column2-queue">{item.title}</div>
<div className="column3-queue">{item.singer}</div>
<div className="column4-queue">
<button
onClick={() => clickdelete(index)}
className="btn-delete"
>
<i className="fa fa-trash"></i>
</button>
</div>
</div>
希望你们明白我在问什么:D
解决方案
// Get a hook function
const {useState} = React
const Example = ({title}) => {
const [count, setCount] = useState(0);
return (
<div>
<div onClick={() => alert('parent')}>
With => e.stopPropagation();
<button onClick={(e) => {
e.stopPropagation();
alert('clicked button')
}}>
Click me
</button>
</div>
<div onClick={() => alert('parent')}>
Without => e.stopPropagation();
<button onClick={(e) => {
alert('clicked button')
}}>
Click me
</button>
</div>
</div>
);
};
// Render it
ReactDOM.render(
<Example title="Example using Hooks:" />,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
是的,可以使用event.stopPropagation()
该事件不会传播到我们的父div
点击处理程序。
<button onClick={(e) => {
e.stopPropagation()
clickdelete(index)
}} className="btn-delete">
<i className="fa fa-trash"></i>
</button>;
推荐阅读
- javascript - 将 Angular 组件输入参数传递给 CSS 的子 div
- javascript - jQuery:if语句选择一个选项值
- angular - 取消 ngx-datatable 中的编辑行并返回以前的数据
- excel - 对象不支持此属性或方法,如果我声明具有正确类型的变量
- python - Keras - 使用大量功能
- mongodb - 执行聚合时出现mongodb错误
- c++ - 为什么我不能直接用 strcpy 复制 C 字符串的某个字符,而必须使用辅助字符串?
- vue.js - 在没有 vuex-persist 的情况下保留 Vuex 状态数据
- gtk - 非编译语言的构建系统
- mysql - MySQL在尝试创建过程时抛出错误“语句不完整,如果”