Javascript 在React中具有onInput的getElementById

我对React是个新手，我正在尝试如何添加一个小函数来帮助我设计滑块组件的样式。我目前正在使用

getElementById

和

onInput

。我发现了类似的问题，但它们都涉及我不想做的

onClick

事件。希望我离这里不太远！感谢您的帮助。以下是我的代码的相关部分：

HTML:

JS（巴别塔）：

class VolumeSlider扩展React.Component{
构造函数（）{
超级（）；
此.state={
价值：120.5
};
}
更新日期（e）{
这是我的国家({
价值：即目标价值
});
}
document.getElementById（“myinput”）.oninput=function（）{
this.style.background='线性渐变（向右，#82CFD0 0%，#82CFD0'+this.state.value+'%，#fff'+this.state.value+'%，白色100%）'
};
render（）{
返回(
这个。更新（e）}
步骤={0.1}
type=“范围”
value={this.state.value}
/>
{this.state.value}c
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

---

谢谢

您不使用更新时使用的相同逻辑的原因是什么

onInput(e){
  e.target.style.background = 'linear-gradient(to right, #82CFD0 0%,  #82CFD0 ' + this.state.value + '%, #fff ' + this.state.value + '%, white 100%)';
}

class VolumeSlider扩展React.Component{
构造函数（）{
超级（）；
此.state={
价值：120.5
};
}
更新日期（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='线性渐变（向右，#82CFD0 0%，#82CFD0'+gradStart+'%，#fff'+gradesnd+'%，白色50%）；
}
render（）{
返回(
这个。更新（e）}
onInput={（e）=>this.onInput（e）}
步骤={0.1}
type=“范围”
value={this.state.value}
/>
{this.state.value}c
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);
#我的输入{
背景：线性梯度（向右，#82CFD0 0%，#82CFD0 50%，#eee 50%，#eee 100%）；
边界半径：8px；
高度：7px；
宽度：356px；
大纲：无；
过渡：背景450ms缓进；
-webkit外观：无；
}

我不太明白您想做什么，您能提供更多详细信息吗？不确定您的要求是什么，您的代码既没有使用getElementById也没有使用onInputHi！我试图编辑输入范围，使其左侧有颜色，但右侧没有。这是我的密码笔，给你一个更好的主意。很抱歉，我刚刚意识到我的原始问题并没有包括我所有的代码，只是编辑了它来解决这个问题。嗨，我试过了，但由于某些原因它不起作用。我用一个模板更新了我的答案，这看起来像你要做的吗？谢谢你的更新！我试图做到这一点，但没有失去范围输入的右侧或拇指前从左到右的梯度。基本上，我试着让吧台正常填满，因为某种原因，这比我想象的要困难一点哈哈。嗨，再次，所以我更新了这个，让它看起来更像我想要的。但由于某些原因，滑块变得超级起伏，不会在单击时更新。有什么想法吗？
#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

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

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }

document.getElementById("myinput").oninput = function() {
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + this.state.value + '%, #fff ' + this.state.value + '%, white 100%)'
};

  render() {
    return (
      <div className="mb1">
        <input
          className="c-input--range"
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}c</label>
        </div>
      </div>
    );
  }
}

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

onInput(e){
  e.target.style.background = 'linear-gradient(to right, #82CFD0 0%,  #82CFD0 ' + this.state.value + '%, #fff ' + this.state.value + '%, white 100%)';
}