我正在将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>
}导出默认程序更新;
1条答案
按热度按时间kqlmhetl1#
出现此错误是因为Slider
onChange
方法传递的是实际值,而不是event
对象。另一方面,InputonChange
方法传递的是event
。你的Slider
onChange
方法看起来像这样-