Javascript 状态为（OFF-PENDING-ON）的交换机的自定义组件：ReactJS

在这种情况下，需要实现三态切换。开关应具有三种切换状态，即关闭、挂起和打开

我已经尽了最大的努力开发了一种带开/关的开关。一直在努力添加“待定”状态。有人能帮我吗

我正在尝试实现以下切换：

以下是指向沙盒的链接：

以下是相同的代码：

应用程序组件

---

如果我理解你的意思，你想要一个复选框，首先选中->未选中->它没有完成，但在某个超时之前一直处于挂起状态->复选框最终被选中，当你想要选中它时，同样的情况也会发生

您需要两个状态，一个用于复选框状态，另一个用于挂起状态（两个布尔值），并且您需要延迟复选框的检查事件（以异步方式进行检查）

这里有一个链接，可以查看我的意思或立即阅读代码

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
checkboxState:true，
待定：错误，
}
this.handleCheckboxChange=this.handleCheckboxChange.bind（this）；
}
HandleCheckBox更改（事件）{
this.setState（{pending:true}）；
//因为除非这样做，否则通常无法以异步方式访问事件
event.persist（）；
设置超时（（）=>{
this.setState（state=>（{
checkboxState:！state.checkboxState，
待定：false
}));
}, 2000)
}
render（）{
返回(
{this.state.pending？“我正在等待”：“}


三态复选框
切克明
)
}
}
导出默认应用程序；

---

请测试它（将粘贴复制到某个文件并运行它），然后告诉我结果。

请确保不能使用布尔值作为这种情况的状态。现在你打算用什么？包含字符串、数字、包含3项的数组的状态…@Amir Mousavi可能是包含值[已启用、待定、已禁用]的数组的状态！另一个问题是toggle的概念，它是一个两态组件，我建议使用@Amir Mousavi之类的东西，你能帮我解决吗？是的，当它从“选中”转换到“未选中”时，会添加一个间隔并添加“我正在等待”，反之亦然。但我想要的只是一个有三个值“开、挂、关”的状态。比如当我提交时，我需要将任何值传递给服务器，比如。但是，以一种具有适当状态值的反应方式，我编辑了我的示例，我希望它与您想要的三状态复选框相匹配。您在JSFIDLE中发布的内容与三状态复选框的问题有不同的要求，我认为可以用三个输入和一个状态变量轻松实现

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: false
    };
  }

  handleChange = () => {
    this.setState({ isChecked: !this.state.isChecked });
  };

  render() {
    console.log("switch value", this.state.isChecked);
    return (
      <>
        <div>
          <label>
            <input
              checked={this.state.isChecked}
              onChange={this.handleChange}
              className="switch"
              type="checkbox"
            />
            <div>
              <div />
            </div>
          </label>
        </div>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

input[type="checkbox"].switch {
  position: absolute;
  opacity: 0;
}

input[type="checkbox"].switch + div {
  vertical-align: middle;
  width: 40px;
  height: 20px;
  border-radius: 999px;
  background-color: red;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: background-color, box-shadow;
  transition-property: background-color, box-shadow;
  cursor: pointer;
}

input[type="checkbox"].switch + div {
  width: 94px;
  height: 48px;
}

input[type="checkbox"].switch:checked + div {
  background-color: #57bb00;
}

input[type="checkbox"].switch + div > div {
  float: left;
  width: 46px;
  height: 46px;
  border-radius: inherit;
  background: #ffffff;
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: transform, background-color;
  transition-property: transform, background-color;
  pointer-events: none;
  margin-top: 1px;
  margin-left: 1px;
}

input[type="checkbox"].switch:checked + div > div {
  -webkit-transform: translate3d(46px, 0, 0);
  transform: translate3d(46px, 0, 0);
}