如何使带有输入框的滑块反应钩子

Question

Slider With input box

const _defaultData = [
    {
      
      percent: 0
    }]

const [data,setData] = useState(_defaultData)

<input type="range" min="0" max="100" defaultValue={data.percent} className="slider" value={data.percent} />

我有一个范围滑块作为输入和一个输入数字字段

<input type="number" name="percent" value={data.percent} placeholder={data.percent} onChange={(e) => setData(e.target.value)}/>

如果输入字段输入为 62，则滑块应更改为 64，但它不起作用。数据正在存储到状态，但它没有改变任何人都可以帮助我处理这个反应挂钩

Answer 1

因为_defaultData是一个数组，要访问percent，你需要写data[0].percent，因为data.percent在这种情况下会返回undefined。