[英]Button onClick is not working inside a react functional component
I have just started learning Reactjs and stuck on this very basic button issue.我刚刚开始学习 Reactjs 并坚持这个非常基本的按钮问题。 I have a functional component named Todo
which has a button delete inside it.我有一个名为Todo
的功能组件,其中有一个删除按钮。 It has onClick
attribute and it runs a function deleteHandler
, but when I click the button nothing happens.它具有onClick
属性并运行 function deleteHandler
,但是当我单击按钮时没有任何反应。 App.js
and Todo.js
codes are given below: App.js
和Todo.js
代码如下:
App.js code App.js 代码
import Todo from "./components/Todo.js";
function App() {
return (
<>
<h1>Todos</h1>
<Todo title="1st todo" />
<Todo title="2nd todo" />
<Todo title="3rd todo" />
<Todo title="4th todo" />
</>
);
}
export default App;
Todo.js code Todo.js 代码
function Todo(props) {
function deleteHandler() {
console.log("U just deleted!");
}
return (
<div className="card">
<div className="content-card">
<div>
<h2>{props.title}</h2>
</div>
<div>
<button type="button" className="btn" onClick={deleteHandler}>
Delete
</button>
</div>
</div>
</div>
);
}
export default Todo;
The button showed the desired results on a different browser.该按钮在不同的浏览器上显示了所需的结果。 I inspected the same page in chrome but no result.我在 chrome 中检查了同一页面,但没有结果。 When I inspected it in edge it worked.当我在边缘检查它时,它起作用了。 I don't know why it happened though.我不知道为什么会这样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.