Javascript 范围滑块不稳定，单击时不更新

我正在使用jsx和一些css在React中制作一个范围滑块。现在，我的滑块在左侧填充，将跟随滑块拇指填充，但非常起伏。也就是说，当你移动滑块时，左侧的填充会溢出，或者实际上无法完全填充，并且必须赶上拇指。此外，当您在未使用拇指的情况下单击滑块中的某处时，填充不会更新。我不知道为什么会发生这种情况，所以我很难修复它。这是我的密码：

HTML:

巴别塔：

class VolumeSlider extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 600
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }
 
  onInput(e){
    const gradStart = (this.state.value/e.target.max/2)*100;
    const gradEnd = (this.state.value/e.target.max)*100;
    e.target.style.background = 'linear-gradient(to right, red 0%,  red ' + gradStart + '%, red ' + gradEnd + '%, #fff 1%)';
  }
  
  render() {
    return (
      <div>
        <input
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          onInput={(e) => this.onInput(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
           <label className="c-label">{this.state.value}c</label>
        </div>
    );
  }
}

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

class VolumeSlider扩展React.Component{
构造函数（）{
超级（）；
此.state={
价值：600
};
}
更新日期（e）{
这是我的国家({
价值：即目标价值
});
}
输入（e）{
const gradStart=（this.state.value/e.target.max/2）*100；
const gradEnd=（this.state.value/e.target.max）*100；
e、 target.style.background='线性渐变（向右，红色0%，红色'+gradStart+'%，红色'+gradEnd+'%，#fff 1%）'；
}
render（）{
返回(
这个。更新（e）}
onInput={（e）=>this.onInput（e）}
步骤={0.1}
type=“范围”
value={this.state.value}
/>
{this.state.value}c
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

---

这是我的参考代码笔：

您正在与React的工作方式作斗争。如果要更新React组件，它应该位于

render（）

中。直接访问

e.target

是围绕React如何更新的想法进行的

//jsx已编辑：
类VolumeSlider扩展React.Component{
构造函数（）{
超级（）；
此.state={
价值：600
};
这个最大值=1200
}
输入（e）{
这是我的国家({
价值：即目标价值
});
}
render（）{
const gradStart=（this.state.value/this.max/2）*100；
const gradEnd=（this.state.value/this.max）*100；
返回(
这个.onInput（e）}
onInput={（e）=>this.onInput（e）}
步骤={0.1}
type=“范围”
样式={background:'线性渐变（向右，红色0%，红色'+gradStart+'%，红色'+gradest+'%，红色'+gradesnd+'%，#fff 1%）'）}
value={this.state.value}
/>
{this.state.value}c
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

是的，我肯定你是对的。但我不确定我怎么能用这个做到。很抱歉，这个框架非常新。添加了代码示例。从CSS中删除style:background，并在render（）中使用style={{background:'CSS here'}}对其进行渲染，并删除在

onUpdate

和

onInput

中访问

e.target

的任何代码。。。这意味着它们现在是一样的，不需要两者兼而有之。只需使用每个设置即可

setState（）

。哇！非常感谢！这很有道理，idk为什么我想用e.target哈哈哈。祝您今天过得愉快！你好！我注意到滑块的起伏度仍然没有固定下来。这是因为我对数字的另一个e.目标吗？我试着移动它们，看看是否有帮助，但没有。任何有帮助的想法-谢谢！您的意思是在

设置状态中使用
e.target.value
？我不这么认为。当我将新的JSX粘贴到代码笔中时，效果非常好（MacBook Air Safari 14）。你穿什么？
input[type='range'] {
  background: linear-gradient(to right, red 0%, red 50%, #fff 50%, #fff 1%);
  border: solid 1px #000;
  border-radius: 5px;
  height: 10px;
  width: 300px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  height: 11px;
  width: 11px;
}

class VolumeSlider extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 600
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }
 
  onInput(e){
    const gradStart = (this.state.value/e.target.max/2)*100;
    const gradEnd = (this.state.value/e.target.max)*100;
    e.target.style.background = 'linear-gradient(to right, red 0%,  red ' + gradStart + '%, red ' + gradEnd + '%, #fff 1%)';
  }
  
  render() {
    return (
      <div>
        <input
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          onInput={(e) => this.onInput(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
           <label className="c-label">{this.state.value}c</label>
        </div>
    );
  }
}

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