reactjs - 输入范围滑块作为反应挂钩不滑动
问题描述
我正在尝试使用 React 钩子制作一个基本的输入范围滑块组件。但是,滑动实际值旋钮不起作用。只有直接单击滑轨上的新值位置才能更改值。
示例代码笔: https ://codepen.io/rmichels/pen/WNegjyK
这是我当前的组件代码,上面的 codepen 复制了它:
import React, { useState } from "react";
const useSlider = (min, max, defaultState, label, id) => {
const [state, setSlide] = useState(defaultState);
const handleChange = e => {
setSlide(e.target.value);
};
const Slider = () => (
<input
type="range"
id={id}
min={min}
max={max}
step={10}
value={state}
onChange={handleChange}
/>
);
return [state, Slider, setSlide];
};
export default useSlider;
我想单击旋钮并左右滑动,触发onChange
函数并setState
在值发生变化时触发它。
解决方案
您的组件在每次更新滑块时设置状态,因此组件正在重新渲染,您失去焦点或保持滑块手柄。相反,您应该在与句柄的交互完成时更新状态。
//import { useState } from 'react';
const { useState } = React;
const useSlider = (min, max, defaultState, label, id) => {
const [state, setSlide] = useState(defaultState);
const handleChange = e => {
console.log('setting level', e.target.value)
setSlide(e.target.value);
};
const Slider = () => (
<input
type="range"
id={id}
min={min}
max={max}
step={0.5}
// value={state} // don't set value from state
defaultValue={state} // but instead pass state value as default value
onChange={e => console.log(e.target.value)} // don't set state on all change as react will re-render
onMouseUp={handleChange} // only set state when handle is released
/>
);
return [state, Slider, setSlide];
};
const App = () => {
const [slideValue, Slider] = useSlider(
1,
100,
70,
"Threshold",
"threshold"
);
return (
<div>
<Slider />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'))
推荐阅读
- python - 在python mysql中将图像插入数据库
- android - 如何更正更新 Android .apk?
- android - 在android中解析节点json
- javascript - 如何根据顺序中剩余的文本框对齐密码框
- javascript - 在登录页面从数据库中检索选择框的值
- stanford-nlp - 使用 Stanford CoreNLP 中的 Simple API,有没有办法获得多令牌实体提及?
- hibernate - 即使外键在 HQL 中为空也返回数据
- php - Laravel 中添加标签的解决方案
- android - 解析失败:Lorg/jsoup/Jsoup;
- c# - If-Statement 没有被观察到