如何捕获CoreUI React中CSwitch的正确值？当前输出始终为'on'

问题出在你读取的属性不对——CSwitch是基于原生checkbox封装的组件，它的value属性默认固定为"on"，并不会随开关状态变化。真正反映开关状态的是checked属性。

修复步骤： #

• 将onChange回调里的e.target.value替换为e.target.checked，这个值是布尔类型（true表示开启，false表示关闭）。

修改后的代码示例：

<CSwitch 
     name={element.Field}
     color={'primary'}
     variant='opposite'
     shape='pill'
     onChange={e => console.log(e.target.checked)}
/>

受控组件写法（推荐） #

如果需要将开关状态和组件状态绑定，实现受控组件：

import { useState } from 'react';
import { CSwitch } from '@coreui/react';

// 组件内部
const [switchState, setSwitchState] = useState(false);

const handleSwitchChange = (e) => {
  const newState = e.target.checked;
  setSwitchState(newState);
  // 这里可以做其他逻辑，比如提交表单等
  console.log('开关状态:', newState);
};

// 渲染CSwitch
<CSwitch 
     name={element.Field}
     color={'primary'}
     variant='opposite'
     shape='pill'
     checked={switchState}
     onChange={handleSwitchChange}
/>

这样就能准确获取到开关的真实状态了。

内容的提问来源于stack exchange，提问作者Jorge H