Switch开关

antd Switch文档 https://ant.design/components/switch-cn

Switches

默认显示，开关

import React, { useState, useEffect } from "react";
import { func, bool, array } from "prop-types";
import { Switch } from "antd";
import { isFunction, isArray, merge } from "lodash-es";
// export const SwitchRef = forwardRef(Switches);
const defaultOptions = ['开', '关'];
/**
 * props.options
 *  ['开启', '关闭']
 *  ['1', '0'],
 *  [<CheckOutlined />, <CloseOutlined />]
 */
Switches.propTypes = {
  value: bool,
  onChange: func,
  options: array,
};
function Switches(props) {
  const { options, value, onChange, ...rest } = props;
  // 选中的内容，非选中时的内容
  const [checkedChildren, unCheckedChildren] = isArray(options) ?
    merge(defaultOptions,options) : defaultOptions;
  // useImperativeHandle(ref, () => form);
  const [checked, setChecked] = useState(value);
  useEffect(() => {
    if (value === checked) return;
    setChecked(value ?? false)
  }, [value])
  // Switch onChange
  function handleChange(checked: boolean, e: Event) {
    setChecked(checked);
    if (!isFunction(onChange)) return;
    onChange(checked, e);
  }
  return (
    <Switch
      {...rest}
      checkedChildren={checkedChildren}
      unCheckedChildren={unCheckedChildren}
      checked={checked}
      onChange={handleChange}
    />
  );
}
export default Switches;

FormItem

import { Switches } from '@/components'
<Form.Item 
  label='状态'
  name='status'
  valuePropName='checked' // default 'value'，针对表单
>
  <Switches />
</Form.Item>

Segmented

import React, { useState, useEffect } from "react";
import { func, bool, string, number, oneOfType, array } from "prop-types";
import { Segmented } from "antd";
import { isFunction, isArray } from "lodash-es";
const defaultOptions = [
  { label: '开', value: true },
  { label: '关', value: false },
];
Segment.propTypes = {
  value: oneOfType([bool, number, string]),
  onChange: func,
  options: array,
};
Segment.defaultProps = {
  options: defaultOptions
}
function Segment(props) {
  const { options, value, onChange, ...rest } = props;
  const [checked, setChecked] = useState(value);
  useEffect(() => {
    if (value === checked) return;
    setChecked(value ?? false)
  }, [value])
  function handleChange(checked: boolean) {
    setChecked(checked);
    if (!isFunction(onChange)) return;
    onChange(checked);
  }
  return (
    <Segmented
      {...rest}
      options={isArray(options) ? options : []}
      onChange={handleChange}
    />
  );
}
export default Segment;

Switch和 Checkbox的区别

Switch & Checkbox Toggle的正确用法 http://jellyjelly.co/archives/343

• Switch 大部分用于系统上的状态变化，Toggle 则用于应用内前后关系的变化
• 前后关系的变化只会影响当前界面的操作，而系统状态的变化是全局性的，在任何时候都能生效
• 常见的错误例子：在搜索过滤器里使用了 Switch 来对选项进行操作。为什么错？搜索过滤的设置只影响于搜索页面内的变化，不适用于整个应用

• 点击 Switch 后能有即时的反馈是用户的预期反馈，但是在搜索过滤页这里，当做出选择后，直到按下确认或者保存按钮，过滤器才会生效，显然这不符合 Switch 的使用场景。

Switch的使用场景

1. 影响系统或者应用的全局状态
2. 两种不同状态的变化，而不是对立的、互斥的变化；需要表示开关状态/两种状态之间的切换时
3. 激活某种状态，而不是执行一个操作

Switch 和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合