如何在React中实现混合效果的indeterminate（三态）复选框

现有代码问题修复 #

你现有的代码核心逻辑是对的，唯一的问题是ref回调只处理了半选状态的indeterminate赋值，没有在其他状态下重置这个属性，会导致状态切换异常。修正后的代码如下：

const [state, setState] = React.useState(0)
const indetSetter = React.useCallback(el => {
  if (el) {
    // 只有state为1的时候开启半选状态，其他状态都关闭
    el.indeterminate = state === 1
  }
}, [state])
const onChange = () => setState(prev => (prev + 1) % 3)

return(
    <Fragment>
        <input
            {...rest}
            ref={indetSetter}
            className={`checkbox__control ${className || ``}`}
            id={id}
            type="checkbox"
            value={value}
            checked={state === 2}
            name={name}
            onChange={onChange}
        />
        <span className="checkbox__icon" />
    </Fragment> 
)

自定义样式实现目标效果 #

如果原生indeterminate的样式不符合你需要的展示效果，可以通过CSS隐藏原生input，用后面的checkbox__icon自定义三种状态的样式：

/* 隐藏原生复选框 */
.checkbox__control {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* 图标基础样式 */
.checkbox__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #d9d9d9;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
/* 半选状态 */
.checkbox__control[indeterminate] + .checkbox__icon::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  background-color: #1677ff;
}
/* 全选状态 */
.checkbox__control:checked + .checkbox__icon {
  background-color: #1677ff;
  border-color: #1677ff;
}
.checkbox__control:checked + .checkbox__icon::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

以上代码实现后，就可以实现未选、半选、全选三种状态的自定义展示效果，点击时会按未选→半选→全选→未选的逻辑循环切换。

内容的提问来源于stack exchange，提问作者Anwaya Rath