React Chakra-UI滑块返回未定义的onChange

Question

我正在尝试在react typescript项目中使用Chakra-UI中的Slider。但是，当我滑动滑块时，onChange触发器返回undefined而不是Numer值。

我很确定我错过了什么，因为这是我第一次使用typescript。

import React, { useState } from 'react'
import { Select, FormControl, FormLabel, Slider, SliderThumb, SliderFilledTrack, Stack, Button } from "@chakra-ui/core";


const MainPage: React.FC = () => {
    const [questionsCount, setQuestionsCount] = useState<number>(10);
    return (
        <div>
           <Slider flex="1" value={questionsCount} min={1} max={50} onChange={(value: number): void => { console.log(value) }}>
              <SliderFilledTrack />
              <SliderThumb
                fontSize="sm"
                width="32px"
                height="20px"
                children={questionsCount}
                />
            </Slider>
          </div >
    )
}

export default MainPage

Answer 1

您缺少SliderTrack，因为它是Slider所需的4个组件之一。

你可以查看文档的here

<Slider flex="1" value={questionsCount} min={1} max={50} onChange={(value: number): void => { console.log(value) }}>
  <SliderTrack />
  <SliderFilledTrack />
  <SliderThumb
     fontSize="sm"
     width="32px"
     height="20px"
     children={questionsCount}
   />
</Slider>