我被这个代码做成了代码和滑块
import { mainModule } from 'process';
import React, { useState } from 'react';
import styled from 'styled-components';
const DragScaleBar = () => {
const [value, setValue] = useState(0);
const changeWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
setValue(parseInt(event.target.value));
};
const MIN = 0;
const MAX = 10;
const DeadlineStyle = styled.h1`
position: absolute;
margin-left: 25em;
font-weight: bold;
font-size: 1em;
font-family: 'Poppins', sans-serif;
`;
const DragStyle = styled.input`
-webkit-appearance: none;
background: #f5f6fa;
position: absolute;
margin-top: 2em;
margin-left: 18em;
width: 20em;
height: 1em;
border-radius: 1em;
cursor: pointer;
box-shadow: 0px 0.5px 0.75px black;
&::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid white;
height: 25px;
width: 25px;
opacity: 0.8;
border-radius: 50%;
background: gray;
}
`;
return (
<>
<DeadlineStyle>마감일 + {value} Day</DeadlineStyle>
<div>
<DragStyle
type="range"
min={MIN}
max={MAX}
value={value}
step="1"
onChange={changeWidth}
/>
</div>
</>
);
};
export default DragScaleBar;
and here is picture
滑块可以更改滑块区域中单击值但当我使用onchange事件时,dragEvent不起作用
我试过用onMouseUp替换onChange,但我不知道如何将它与打字脚本一起使用。
以前有没有人解决过像我代码一样的问题?
1条答案
按热度按时间kknvjkwl1#
将样式化的组件放在“真实的”组件中会导致它们在每次更新值时重新渲染,从而导致您所描述的错误。
提取所有不需要在
DragScaleBar
之外重新渲染的内容将解决您的问题。查看https://codesandbox.io/s/loving-joji-f9u0xw?file=/src/DragScaleBar.tsx
ps,你不需要在你的
changeWidth
方法中做event.preventDefault()
:)