admin 管理员组

文章数量: 1086019


2024年4月28日发(作者：propertypal)

react switch 用法

ReactSwitch是React提供的一个开关组件，通常用于表示开关

状态的切换。它的用法非常简单，只需要在 JSX 中引入 Switch 组

件，设置 onChange 属性，然后在回调函数中处理开关状态即可。

示例代码：

```jsx

import React, { useState } from 'react';

import Switch from '@material-ui/core/Switch';

function MySwitch() {

const [state, setState] = useState({

checkedA: true,

checkedB: true,

});

const handleChange = (event) => {

setState({ ...state, []:

d });

};

return (

checked={dA}

onChange={handleChange}

- 1 -

name='checkedA'

inputProps={{ 'aria-label': 'secondary checkbox' }}

/>

);

}

export default MySwitch;

```

在上面的代码中，我们使用 useState 钩子来定义一个 state

对象，其中包含两个开关状态 checkedA 和 checkedB。handleChange

函数用于更新状态，它接收一个 event 对象，可以通过

和 d 获取开关的名称和

状态。

在 JSX 中，我们使用 Switch 组件来渲染开关，设置 checked

属性为 dA，onChange 属性为 handleChange 函数。

inputProps 属性用于设置辅助信息，比如 aria-label，这里我们设

置为“secondary checkbox”。

这样就完成了 React Switch 的用法介绍。如果你想学习更多

React 组件的使用方法，请查看 React 官方文档。

- 2 -


本文标签： 开关 状态 组件

版权声明：本文标题：react switch 用法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1714285292a673468.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。