为什么我的日期和时间输入不起作用？

IT技术 css reactjs material-ui
2022-08-04 01:52:44

我有一个 React 前端，我使用 Material UI 设计对其进行了样式设置。我将日期和时间组件样式添加到我的表单中，现在表单无法使用“名称”值并进一步处理发布。问题是仅在日期和时间输入字段中发生错误“TypeError：无法读取未定义的属性（读取'名称'）”....请检查我的代码，谢谢。

function ReservationForm(){
    const navigate = useNavigate();
    const params = useParams();
    const {user}=useContext(Cont)


    
    const[reservationData,setReservationData]=useState({
        name:"",
        date:"",
        time:"",
        num:"",
        contact:"",
        occasion:"",
    });
    function handleReservationChange(event){
        setReservationData({
            ...reservationData,
            [event.target.name]: event.target.value,
        })
    }
    
    function handleReservationSubmit(event){
        event.preventDefault();
        const newReservation={
            ...reservationData,
            restaurant_id: params.id,
            user_id: user.id,
        };

        fetch(`/reservations`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(newReservation),
          })
            .then((r) => r.json())
            .then(
                setReservationData({
                name:"",
                date:"",
                time:"",
                num:"",
                contact:"",
                occasion:"",
              })
            );
          navigate("/myreservations");
        }

    
    return(
        <>
          <Box
        component="form"
        sx={{
          "& > :not(style)": { m: 1 },
        }}
        noValidate
        autoComplete="off"
        onSubmit={handleReservationSubmit}
      >
       <h1 className="editheadings">Reserve 🍽️</h1> 
      
       <FormControl  className="inputstyle">
          <InputLabel htmlFor="component-outlined">Name</InputLabel>
          <OutlinedInput
            type="text"
            name="name" 
            id="name"
            value={reservationData.name} 
            onChange={handleReservationChange} 
            label="Name"
          />
        </FormControl>
        <br />
        <FormControl>
          <LocalizationProvider   name="date" dateAdapter={AdapterDayjs}  fullWidth>
            <DatePicker
            name="date"
              label="Date"
              value={reservationData.date}
              onChange={handleReservationChange}
              renderInput={(params) => <TextField {...params} />}
              
            />
          </LocalizationProvider>
        </FormControl>
        <FormControl>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <TimePicker
   name="time" label="Time"
              value={reservationData.time} onChange={handleReservationChange}
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </FormControl>
        <br />
        <FormControl className="inputstyle">
          <InputLabel htmlFor="component-outlined">No. of Guests</InputLabel>
          <OutlinedInput
            type="number"
            name="num"
            value={reservationData.num} onChange={handleReservationChange}
          />
        </FormControl>
        <br />
        <FormControl className="inputstyle">
          <InputLabel htmlFor="component-outlined">Contact</InputLabel>
          <OutlinedInput
            type="tel"
            name="contact"
            value={reservationData.contact} onChange={handleReservationChange}
            placeholder="contact"
          />
        </FormControl>
        <br />
        <FormControl className="inputstyle">
          <InputLabel htmlFor="component-outlined">Occasion</InputLabel>
          <OutlinedInput
            type="text"
            name="occasion"
            value={reservationData.occasion} onChange={handleReservationChange}
          />
        </FormControl>
        <Stack paddingLeft={15} direction="row" id="loginbutton">
          <ColorButton variant="contained" type="submit">
            {" "}
            Update Reservation
          </ColorButton>
        </Stack>

       
       </Box>
        </>
    )
}
export default ReservationForm;
2个回答

由于DatePicker和TimePickeronChange 事件发送的是新值而不是事件，因此您需要为以下组件添加新的 handleChangeDatePicker函数TimePicker：

function handleReservationChangeWithNameAndValue(name, newValue) {
    setReservationData({
      ...reservationData,
      [name]: newValue
    });
}

并相应地传递它DatePicker和TimePicker组件：

<DatePicker
  name="date"
  label="Date"
  value={reservationData.date}
  onChange={(newVal) =>
    handleReservationChangeWithNameAndValue("date", newVal)
  }
  renderInput={(params) => <TextField {...params} />}
/>

<TimePicker
  name="time"
  label="Time"
  value={reservationData.time}
  onChange={(newVal) =>
    handleReservationChangeWithNameAndValue("time", newVal)
  }
  renderInput={(params) => <TextField {...params} />}
/>

您可以查看此沙箱，以获取具有此功能的表单的实时工作示例。

最好检查一下这个功能。

function handleReservationChange(event){
        setReservationData({
            ...reservationData,
            [event.target.name]: event.target.value,
        })
    }

基于这个函数，每个字段都应该有name属性。但正如您所看到的，其中一些没有该属性。

其它你可能感兴趣的问题
上一篇新表单的内容安全策略问题 下一篇React Hook useEffect 缺少依赖项：'getNewPins'