react 实现一个
以下是基于 React 实现一个简单计数器组件的代码示例，包含状态管理和交互逻辑：
计数器组件实现
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);
const reset = () => setCount(0);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>React Counter</h1>
<p>Current Count: {count}</p>
<button onClick={increment} style={{ margin: '5px' }}>+</button>
<button onClick={decrement} style={{ margin: '5px' }}>-</button>
<button onClick={reset} style={{ margin: '5px' }}>Reset</button>
</div>
);
}
export default Counter;功能说明
- 使用
useStatehook 管理计数器状态 - 提供三个操作函数：增加、减少和重置
- 按钮点击事件绑定对应操作方法
- 当前计数值实时显示在界面上
样式优化建议
可以添加 CSS 模块或 styled-components 来增强视觉效果：
import styles from './Counter.module.css';
// 在组件中使用
<button className={styles.button} onClick={increment}>+</button>扩展功能
如需添加更多功能，可以考虑：
- 最大/最小值限制
- 步长设置
- 历史记录功能
- 持久化存储
该组件展示了 React 的核心概念：状态管理、事件处理和组件化开发。可以根据实际需求进一步扩展和完善。
