Fondamentalement, j'ai été chargé de modifier une interface utilisateur en tant que mini-défi pour m'aider à me lancer dans la programmation.
Je souhaite ajouter un sélecteur de date à ma barre de recherche afin de réduire la recherche entre deux dates . J'ai le fonctionnement de l'interface utilisateur, bien que lorsque l'utilisateur sélectionne une date à l'aide du sélecteur, la date du sélecteur ne met pas à jour. Rien ne se passe, et je ne suis pas sûr de savoir pourquoi. P>
Voici mon code: p>
Boîte de recherche: strong> p> import React from "react";
import "date-fns";
import { Paper } from "@material-ui/core";
import DateFnsUtils from "@date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from "@material-ui/pickers";
class DatePickerWidget extends React.Component {
render() {
return (
<Paper id="date-picker-widget" elevation={8}>
<Paper id="date-filters" elevation={8}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="Start Date"
format="yyyy/MM/dd"
value={this.props.startDate}
maxDate={this.props.endDate}
onChange={(date) => this.props.update({ startDate: date })}
KeyboardButtonProps={{
"aria-label": "change start date",
}}
/>
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="End Date"
format="yyyy/MM/dd"
value={this.props.endDate}
minDate={this.props.startDate}
onChange={(date) => this.props.update({ endDate: date })}
KeyboardButtonProps={{
"aria-label": "change end date",
}}
/>
</MuiPickersUtilsProvider>
</Paper>
</Paper>
);
}
}
export default DatePickerWidget;
3 Réponses :
On dirait que le problème est réellement dans votre fichier index.js code>. Vous importatez datePickerwidget code> au lieu de Searchbox code>. Par conséquent, lorsque vous créez votre composant Searchbox CODE>, mais il y a d'autres dépendances (CSS, etc.) qui devraient être résolues. Laissez-moi savoir si cela aide! import React from "react";
import ReactDOM from "react-dom";
import App from "./DatePickerWidget";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App update={() => console.log("here")} />
</React.StrictMode>,
rootElement
);
Votre DatePickerwidget ne met pas la mise à jour car il n'a pas un état , vous devez ajouter un état dans lequel le passage à vos dates est reflété.
I.e. DatePickerwidget
Vous pouvez ajouter la fonction de mise à jour et passer comme ci-dessous.
const update = (value) => {
console.log(value);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App update={update} />
</React.StrictMode>,
rootElement
);
On dirait que vous pouvez mettre cela sur CoDesandbox, pouvez-vous faire cela?
Bien sûr, voici: codesandbox.io/s/bold-torvalds-phoxq