React Function 中的问题 Chakra Slider：undefined event.target

Question

I'm changing React Class into function for a component with text and number input from database (mongodb). The function handleInputChange works fine for input text and number, but not with the slider. Don't know, how to solve. TypeError: Cannot destructure property 'name' of 'event.target' as it is undefined.

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>

} export default ProgrammUpdate;

Answer 1

You were getting this error because Slider onChange method passes the actual value, not the event object. On the other hand, the Input onChange method passes the event .

Your Slider onChange method will look something like this-

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