react开关按钮组件
时间: 2023-09-10 21:13:20 浏览: 45
React开关按钮组件可以通过使用React组件库或者手动编写代码来实现。以下是一个简单的手动编写实例:
```
import React, {useState} from 'react';
import './SwitchButton.css';
function SwitchButton(props) {
const [isChecked, setIsChecked] = useState(props.isChecked || false);
const handleChange = () => {
setIsChecked(!isChecked);
props.onChange && props.onChange(!isChecked);
}
return (
<div className={`switch-button ${isChecked ? 'checked' : ''}`} onClick={handleChange}>
<div className={`switch-button-switch ${isChecked ? 'checked' : ''}`}>
</div>
</div>
)
}
export default SwitchButton;
```
使用该组件只需在父组件中引入并使用`SwitchButton`组件:
```
import React from 'react';
import SwitchButton from './SwitchButton';
function App() {
const [isChecked, setIsChecked] = useState(false);
const handleChange = () => {
setIsChecked(!isChecked);
}
return (
<div>
<SwitchButton isChecked={isChecked} onChange={handleChange} />
</div>
);
}
export default App;
```
在以上例子中,`isChecked`和`handleChange`将是两个简单从父组件传递到`SwitchButton`组件中的方法和值, 并且 `onChange` 方法在父组件中被调用每当开关按钮状态改变时。