向 input='range' 添加值会导致图形错误

Question

我正在使用 React ^16.9 并且我正在创建一个输入type='range'，但是当我将起始值 , 添加value="17"到输入时，我无法再移动滑块。由于某种原因它变得固定。

这有效，但滑块从输入范围的中间开始

<input className="range" type="range" min="0" max="100"/>

这不允许我移动滑块

<input className="range" type="range" min="0" max="100" value="17"/>

---

我似乎无法弄清楚可能导致此问题的原因，任何有关为什么第二个滑块的 GUI 不移动的建议将不胜感激。

Answer 1

如果您指定一个值，您还应该指定一个 onchange 处理程序，因此当您移动滑块时，它会更新该值。

Answer 2

您需要将值放入状态并添加 onChange 处理程序。// in constructorconst state = {&nbsp; &nbsp; sliderValue: 17}handleOnChange = (e) => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; sliderValue: e.target.value&nbsp; &nbsp; })}// in render<input&nbsp;&nbsp; &nbsp; className="range"&nbsp; &nbsp; type="range"&nbsp; &nbsp; min="0"&nbsp;&nbsp; &nbsp; max="100"&nbsp;&nbsp; &nbsp; value={this.state.sliderValue}&nbsp; &nbsp; onChange={this.handleOnChange}/>

Answer 3

function App() {&nbsp; const [value, setValue] = useState(17);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; className="range"&nbsp; &nbsp; &nbsp; &nbsp; type="range"&nbsp; &nbsp; &nbsp; &nbsp; min="0"&nbsp; &nbsp; &nbsp; &nbsp; max="100"&nbsp; &nbsp; &nbsp; &nbsp; value={value}&nbsp; &nbsp; &nbsp; &nbsp; onChange={e => setValue(e.target.value)}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </>&nbsp; );}