reactjs React功能中的脉轮滑块问题:未定义的event.target

sf6xfgos  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(124)

我正在将React类更改为一个从数据库(mongodb)输入文本和数字的组件的函数。函数handleInputChange对输入文本和数字工作正常,但对滑块不起作用。不知道如何解决。类型错误:无法析构“event.target”的属性“name”,因为它未定义。

const ProgrammUpdate = props => {

const {id} = useParams();

const initialProgrammState = {
    id: null,
    title: "",
    description: "",
    volume_left: "",
    volume_right: "",
}

const [currentProgramm, setCurrentProgramm] = useState(initialProgrammState);

const {user} = ChatState();
const toast = useToast();
const history = useHistory();
const [message, setMessage] = useState("");

const bg = useColorModeValue('brand.200', 'brand.100')
const color = useColorModeValue('gray.800', 'white')

const getProgramm = programmId => {
    HoerprogrammDataService.get(programmId)
        .then(response => {
            setCurrentProgramm(response.data);
            console.log(response.data);
        })
        .catch(e => {
            console.log(e);
        })
}

useEffect(() => {

    if (id)
        getProgramm(id);
    // eslint-disable-next-line
    console.log(id)

}, [id]);

const handleInputChange = event => {
    const {name, value} = event.target;
    setCurrentProgramm({...currentProgramm, [name]: value});
};

const updateProgramm = () => {

    HoerprogrammDataService.update(id, currentProgramm)
        .then(response => {
            console.log(response.data);

            // setMessage("The tutorial was updated successfully!");
            history.push('/programme');
        })
        .catch(e => {
            console.log(e);
        });
};

const deleteProgramm = () => {
    HoerprogrammDataService.delete(currentProgramm.id)
        .then(response => {
            console.log(response.data);
            history.push('/programme');
        })
        .catch(e => {
            console.log(e);
        });
};

return<LandingLayout>
    <h2>Test</h2>

    {currentProgramm ? (<>

        <Input
            placeholder={currentProgramm.title} size='md'
            type="text"
            className="form-control"
            id="title"
            required
            value={currentProgramm.title}
            onChange={handleInputChange}
            name="title"

        />

            <Input
                placeholder={currentProgramm.volume_left}
                type="text"
                className="form-control"
                id="volume_left"
                value={currentProgramm.volume_left}
                onChange={handleInputChange}
                name="volume_left"

            />

               <Slider
                flex='1'
                value={currentProgramm.volume_left}
                onChange={handleInputChange}
                orientation='horizontal'
                minH='20'
                name="volume_left"
                min={0} max={10} step={1}
            >
                <SliderMark value={0} mt='12' ml='-1.5' fontSize='md'>0</SliderMark>
                <SliderMark value={5} mt='12' ml='-1.5' fontSize='md'>5</SliderMark>
                <SliderMark value={10} mt='12' ml='-1.5' fontSize='md'>10</SliderMark>

                <SliderTrack bg='blue.200'>
                    <SliderFilledTrack bg="blue.400" />
                </SliderTrack>
                <SliderThumb bg="blue.400" fontSize='md' boxSize='40px' children={currentProgramm.volume_left}>{currentProgramm.volume_left}</SliderThumb>

            </Slider>

            <Routelink to={"/programme"} className={"nav-link"}>
                <Button variant={ "outline"} colorScheme={"red"}>Abbruch</Button>
            </Routelink>

            <button className="badge badge-danger mr-2" onClick={deleteProgramm}>
                Delete
            </button>

            <button
                type="submit"
                className="badge badge-success"
                onClick={updateProgramm}
            >
                Update
            </button>
            <p>{message}</p>

        </>

    ) : (
        <Box d="flex" alignItems="center" justifyContent="center" h="100%">
            <Text fontSize="3xl" pb={3} fontFamily="Work sans">Programm nicht geladen</Text>
        </Box>
    )}
</LandingLayout>

}导出默认程序更新;

kqlmhetl

kqlmhetl1#

出现此错误是因为SlideronChange方法传递的是实际值,而不是event对象。另一方面,InputonChange方法传递的是event
你的SlideronChange方法看起来像这样-

const handleSliderChange = (val) => {
  setCurrentProgramm({...currentProgramm, volume_left: val})
}

相关问题