向 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 constructor

const state = {

    sliderValue: 17

}

handleOnChange = (e) => {

    this.setState({

      sliderValue: e.target.value

    })

}

// in render

<input 

    className="range"

    type="range"

    min="0" 

    max="100" 

    value={this.state.sliderValue}

    onChange={this.handleOnChange}

/>

Answer 3

function App() {

  const [value, setValue] = useState(17);

  return (

    <>

      <input

        className="range"

        type="range"

        min="0"

        max="100"

        value={value}

        onChange={e => setValue(e.target.value)}

      />

    </>

  );

}