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

Question

我一直在尝试将 classes 动态设置为单选按钮，但我无法这样做。我正在维护一个带有单选按钮 "ENABLED, PENDING , DISABLED" 的开关。根据单选按钮的选择，我正在尝试分配 class names to change the colors 。

不胜感激。

沙盒：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

看起来标签和输入字段之间没有关系，如果点击标签，没有任何反应：

像这样调整代码：

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

或

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

除此之外，你的 CSS class 被称为 switch-enabled 但你设置了 switch-green 所以没有任何反应:)

也看看 radio group documentation:

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

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

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

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

Answer 2

这是您的沙箱的分叉版本，其中包含工作代码：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

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

Dynamically Add classes for list of radio button based on its state: ReactJS

html

javascript

css

setstate

reactjs

应用程序

CSS

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

Dynamically Add classes for list of radio button based on its state: ReactJS

html

javascript

css

setstate

reactjs

应用程序

CSS

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