如何解决ReactJs:定义事件处理程序的最佳实践
我最近开始使用ReactJs,我想知道在React中定义事件处理程序的最佳实践是什么。这就是我一直在使用react事件处理程序的方式:
import React,{ useState } from "react";
import "./styles.css";
export default function App() {
const [counter,setCounter] = useState(0);
const handleButtonClick = () => {
setCounter(counter + 1);
};
return (
<div className="App">
<button onClick={() => handleButtonClick()}>
Click Me To increase counter
</button>
<div>
<h4>Counter value is: </h4>
{counter}
</div>
</div>
);
}
我也听到了反对这种逻辑的争论。有人说,最好在组件定义之外定义事件处理程序(在本例中为App
)。这样,它变得清晰,简洁,简洁,而不是在组件内部创建一堆杂乱的功能(无论是否有事件处理程序)。例如:
import React,{ useState } from "react";
import "./styles.css";
const handleButtonClick = (setCounter,counter) => () => {
setCounter(counter+1);
};
export default function App() {
const [counter,setCounter] = useState(0);
return (
<div className="App">
<button onClick={handleButtonClick(setCounter,counter)}>
Click Me To increase counter
</button>
<div>
<h4>Counter value is: </h4>
{counter}
</div>
</div>
);
}
CodeSandbox Link for second approach
我想知道定义功能的最佳实践是什么?是否应该在函数组件(App Component in this case
)上方全局定义事件处理程序?
解决方法
是否应该在函数组件上方全局定义事件处理程序?
否。
在组件外部定义修改组件状态的事件处理程序会中断cohesion。
组件中的事件处理程序解释了组件的不同交互。拥有“包装器”处理程序只会破坏single level of abstraction。
我的两分钱。
,您无需在onClick内创建其他功能。只是不要叫它。在onClick触发时调用onClick方法。
const handleButtonClick = () => {
setCounter(counter + 1);
}; // return function
<div onClick={handleButtonClick} />
// it will be call the handleButtonClick
// when onClick is trigger
import React,{ useState } from "react";
import "./styles.css";
export default function App() {
const [counter,setCounter] = useState(0);
const handleButtonClick = () => {
setCounter(counter + 1);
};
return (
<div className="App">
<button onClick={handleButtonClick}>
Click Me To increase counter
</button>
<div>
<h4>Counter value is: </h4>
{counter}
</div>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。