javascript - 如何根据元素自身的值设置伪元素的样式？

Question

我有一个映射数组 <input > 设置为 type="range"的。我可以使用 Sass 设置它们的样式，使它们看起来像我想要的那样，但我也希望样式根据输入本身的值进行更改。

<div>
    <input
        id={"ts-" + index}
        className="trinary-toggle"
        type="range"
        min="-1"
        max="1"
        step="1"
        value=this.handleValue()
        onChange={(event) => {
            let thisSwitch = document.getElementById("ts-" + index);
            //unsure of what to do here. thisSwitch is undefined
        }}
    />
</div>

以及用于设置相关部分样式的 scss

.trinary-toggle::-webkit-slider-runnable-track {
    background: #CCCCCC;
}

如何根据输入的值更改“trinary-toggle::-webkit-slider-runnable-track”的背景样式？

Answer 1

我建议不要动态修改样式，而是创建多个类并根据输入的值应用正确的类。

这是一个简单的示例:

const ternarySliderClasses = ["trinary-toggle-red", "trinary-toggle-yellow", "trinary-toggle-green"];

class TernarySlider extends React.Component {
  state = { value: 0 };

  render() {
    const value = this.state.value;
    const stateClass = ternarySliderClasses[+value + 1];
    return ( 
      <input
        className={classNames('trinary-toggle', stateClass)}
        value={value}
        type="range"
        min="-1"
        max="1"
        step="1"
        onChange={this.handleChange}
      />
    );
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value
    });
  };
}

ReactDOM.render(<TernarySlider /> , document.getElementById("root"));

.trinary-toggle::-webkit-slider-runnable-track,
.trinary-toggle::-moz-range-track {
  border: 1px solid #333;
}

.trinary-toggle-red::-webkit-slider-runnable-track,
.trinary-toggle-red::-moz-range-track {
  background: #F00;
}

.trinary-toggle-yellow::-webkit-slider-runnable-track,
.trinary-toggle-yellow::-moz-range-track {
  background: #FF0;
}

.trinary-toggle-green::-webkit-slider-runnable-track,
.trinary-toggle-green::-moz-range-track {
  background: #0F0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />