javascript - 根据状态为单选按钮列表动态添加类：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;
}

标签： javascripthtmlcssreactjssetstate

Answer 1

看起来标签和输入字段之间没有任何关系，如果单击标签，则不会发生任何事情：

像这样调整代码：

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

或者

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

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

另请查看无线电组文档：

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

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

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

顺便说一句，克里斯托弗的回答解决了你的确切问题，这只是一个补充。