estoy usando reaccionar material-ui (MUI)
Quiero mostrar un error en alguna condición que se calculará en el backend.
Usé MUI-datepicker pero no puedo mostrar el error
import * as React from 'react'; import TextField from '@mui/material/TextField'; import AdapterDateFns from '@mui/lab/AdapterDateFns'; import LocalizationProvider from '@mui/lab/LocalizationProvider'; import DatePicker from '@mui/lab/DatePicker'; const PickupDatePickerComponent = (props) => { const [value, setValue] = React.useState(null); const handleChange = (newValue)=>{ setValue(newValue); } const todayDate = new Date(); return ( <LocalizationProvider style={{ width:"100%"}} dateAdapter={AdapterDateFns}> <DatePicker label="example" value={value} onChange={handleChange} minDate={todayDate} renderInput={(params) => <TextField error helperText="Your error message" {...params} sx={{ width:"100%" }} />} onError={true} error helperText="Your error message" /> </LocalizationProvider> ); } export default PickupDatePickerComponent la propiedad de error no funciona ni en <Input/> ni en <DatePicker/> por lo que el borde no será rojo... (como los errores normales)
Poner el atributo de error después de {...params} sx={{ width:"100%" }}
como esto
renderInput={(params) => <TextField {...params} sx={{ width:"100%" }} error helperText="Your error message" />}DatePicker distribuye accesorios a través de elementos secundarios, por lo que de hecho puede usar los accesorios errorText y errorStyle del elemento TextField. Por ejemplo, probé el siguiente DatePicker en "^0.18.7" y puedo confirmar que aparece con un mensaje de error rojo:
<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />Debe tener en cuenta que la devolución de llamada onChange en DatePicker solo se activa cuando se selecciona una fecha, por lo que el argumento de fecha nunca será nulo o indefinido. En otras palabras, nunca entrará en la siguiente declaración if:
if(date == null || date == undefined){ this.setState({ dobError: 'Please select your date of birth' }); }Si desea verificar los casos en los que el usuario no ha establecido ningún tipo de fecha, considere simplemente verificar si su fecha de nacimiento es nula o no (dejé fuera los accesorios irrelevantes para acortar las cosas):
<DatePicker errorText={this.state.dob ? {} : this.state.dobError} errorStyle={this.state.dob ? {} : errorStyle} >pasé a onError prop una función de devolución de llamada como se recomienda en los documentos , esta es una demostración funcional basada en su código.