根据状态为单选按钮列表动态添加类：ReactJS

Question

我一直在尝试将类动态设置为单选按钮，但我无法这样做。我有点维护一个带有单选按钮“启用，挂起，禁用”的开关。基于单选按钮选择，我正在尝试分配类名来更改颜色。

我们将不胜感激。

沙盒：https://codesandbox.io/s/complex-logic-to-map-an-array-rkspo

应用

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      switchValue: "pending"
    };
    this.handleButtonChange = this.handleButtonChange.bind(this);
  }

  handleButtonChange(event) {
    this.setState(
      {
        switchValue: event.target.value
      },
      () => {
        console.log(this.state.switchValue);
      }
    );
  }

  render() {
    const { switchValue } = this.state;
    return (
      <div className={"switch-toggle"}>
        <input
          type="radio"
          onChange={this.handleButtonChange}
          name={"disabled"}
          value={"disabled"}
          checked={switchValue === "disabled" ? true : false}
        />{" "}
        <label className={switchValue === "disabled" ? "switch-red" : ""}>
          DISABLED
        </label>
        <input
          type="radio"
          onChange={this.handleButtonChange}
          name={"pending"}
          value={"pending"}
          checked={switchValue === "pending" ? true : false}
        />{" "}
        <label className={switchValue === "pending" ? "switch-pending" : ""}>
          PENDING
        </label>
        <input
          type="radio"
          onChange={this.handleButtonChange}
          name={"enabled"}
          value={"enabled"}
          checked={switchValue === "enabled" ? true : false}
        />{" "}
        <label className={switchValue === "enabled" ? "switch-green" : ""}>
          ENABLED
        </label>
      </div>
    );
  }
}

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

CSS

.switch-toggle {
  float: left;
  background: #242729;
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
}
.switch-toggle input + label {
  padding: 7px;
  float: left;
  color: #fff;
  cursor: pointer;
}
.switch-pending {
  background: grey;
}
.switch-disabled {
  background: red;
}
.switch-enabled {
  background: green;
}

Answer 1

这是您的沙盒的分叉版本，其中包含工作代码：https://codesandbox.io/s/complex-logic-to-map-an-array-8ghfh

尝试了解您正在使用的课程。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      switchValue: "pending"
    };
    this.handleButtonChange = this.handleButtonChange.bind(this);
  }

  handleButtonChange(event) {
    this.setState(
      {
        switchValue: event.target.value
      },
      () => {
        console.log(this.state.switchValue);
      }
    );
  }

  render() {
    const { switchValue } = this.state;
    return (
      <div className={"switch-toggle"}>
        <input
          id="disabled"
          type="radio"
          onChange={this.handleButtonChange}
          name={"disabled"}
          value={"disabled"}
          checked={switchValue === "disabled" ? true : false}
        />{" "}
        <label
          htmlFor="disabled"
          className={switchValue === "disabled" ? "switch-disabled" : ""}
        >
          DISABLED
        </label>
        <input
          id="pending"
          type="radio"
          onChange={this.handleButtonChange}
          name={"pending"}
          value={"pending"}
          checked={switchValue === "pending" ? true : false}
        />{" "}
        <label
          className={switchValue === "pending" ? "switch-pending" : ""}
          htmlFor="pending"
        >
          PENDING
        </label>
        <input
          id="enabled"
          type="radio"
          onChange={this.handleButtonChange}
          name={"enabled"}
          value={"enabled"}
          checked={switchValue === "enabled" ? true : false}
        />{" "}
        <label
          htmlFor="enabled"
          className={switchValue === "enabled" ? "switch-enabled" : ""}
        >
          ENABLED
        </label>
      </div>
    );
  }
}

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

尽管如此，我不知道为什么你会在这种情况下使用单选按钮，因为你甚至看不到它们。仅将标准按钮与单击事件一起使用可能更有意义。这将确保更少的加价:)

类似这个沙盒的东西可以完成同样的事情并且更容易维护：https://codesandbox.io/s/complex-logic-to-map-an-array-w6hgb

Answer 2

标签和输入字段之间似乎没有任何关系，如果单击标签，则没有任何反应：

像这样调整代码：

<input type="radio" id="foo" />
<label htmlFor="foo">Foo</label>

或

<label>
 <input .../>
</label>

除此之外，您的 CSS 类名为 switch-enabled，但您设置了 switch-green，所以什么也没有发生 :)

也可以看看radio group documentation：

通过为组中的每个单选按钮赋予相同的名称来定义单选组。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中的任何当前选择的单选按钮。

一个更简洁且语义正确的示例可能如下所示：

function RadioGroup({ defaultChecked = "bar" }) {
  function handleChange(ev) {
    const { value } = ev.target;
    // do something with the value
  }

  return (
    <form>
      <label>
        <input
          defaultChecked={defaultChecked === "foo"}
          type="radio"
          name="name"
          value="foo"
          onChange={handleChange}
        />{" "}
        Foo
      </label>

      <label>
        <input
          defaultChecked={defaultChecked === "bar"}
          type="radio"
          name="name"
          value="bar"
          onChange={handleChange}
        />{" "}
        Bar
      </label>

      <label>
        <input
          defaultChecked={defaultChecked === "baz"}
          type="radio"
          name="name"
          value="baz"
          onChange={handleChange}
        />{" "}
        Baz
      </label>
    </form>
  );
}

如果 HTML 标记是正确的，你可以使用 CSS Pseudo Selector "checked" 来设置你的 CSS 没有 Javascript ?

顺便说一句，Christopher 的答案解决了你的确切问题，这只是一个补充。