具有（OFF-PENDING-ON）状态的开关的自定义组件：ReactJS

Question

我有这种情况需要实施三态切换。开关应具有三种切换状态，即分别为 OFF、PENDING 和 ON。

我已经尽我最大的努力用ON/OFF开发了一个开关。一直在努力添加 "PENDING" 状态。有人可以帮我解决这个问题吗？

我正在尝试实现以下开关： https://i.stack.imgur.com/q1WSN.png

这里是 link 沙箱：https://codesandbox.io/s/patient-currying-rg6h5

下面还有相同的代码：

应用组件

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);

CSS

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);
}

Answer 1

如果我理解你，你想要一个首先选中的复选框 -> 取消选中它不会完成，但会一直等待直到超时 -> 复选框最终取消选中，当取消选中时反过来也会发生同样的情况并且你想检查一下。

您需要两种状态，一种用于复选框状态，另一种用于待定状态（两个布尔值），并且您需要推迟检查复选框的事件（以异步方式检查）

这里有一个link看看我的意思还是马上看代码 https://codepen.io/lalosh/project/editor/XVPbpW

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      checkboxState: true,
      pending: false,
    }

    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);

  }

  handleCheckboxChange(event){
    this.setState({ pending: true });

    //because normally you cannot access event in an async manner unless you do this
    event.persist();

    setTimeout(() => {

      this.setState(state => ({ 
        checkboxState: !state.checkboxState,
        pending: false
      }));

    }, 2000)
  }

  render(){
    return (<div>
      {this.state.pending ? "I am pending" : ""}
      <br/>

      three state checkbox 

      <input type="checkbox" checked={this.state.checkboxState} onChange={this.handleCheckboxChange}/> checkMeIn

      </div>)
  }
}

export default App;

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

具有（OFF-PENDING-ON）状态的开关的自定义组件：ReactJS

Custom Component for a switch with (OFF-PENDING-ON) State: ReactJS

html

javascript

css

setstate

reactjs

应用组件

CSS