mise à jour d'un composant Select
Bonjour,
Pour créer un composant, j'utilise les composants de base MUI. J'ai un json en entrée, que j'affiche sous forme de TreeView, un composant TextField, et un composant Select
Chaque élément de mon json est de la forme :
Code:
{ id: 36, fr: "003-003", en: "003-003", type: "JURI", children: [] }
avec éventuellement dans children d'autres éléments de la même forme.
Quand je clique sur un item du TreeView, je voudrais mettre à jour le TextField avec la propriété 'fr', et mettre à jour le Select avec la propriété 'type'.
Pour cela, je passe par un useState pour récupérer les propriétés de l'élément du json qui a été sélectionné
Le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| const [selectedItem, setSelectedItem] = useState({});
const onSiteSelect = (itemId) => {
setSelectedItem(json.data.filter(el => el.id === itemId)[0])
}
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={2}>
<Treeview json={json} language="fr" showTitle={false} fctOnClick={onSiteSelect}/>,
</Grid>
<Grid size={5}>
<Box
component="form"
sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
noValidate
autoComplete="off"
>
<TextField value={selectedItem.fr} label="Nom" defaultValue=" " variant="outlined" />
<FormControl fullWidth>
<InputLabel>Type</InputLabel>
<Select
defaultValue=""
value={selectedItem.type}
label="Type"
>
<MenuItem value={"GEOG"}>Geographique</MenuItem>
<MenuItem value={"JURI"}>Juridique</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
<Grid size={5}>
</Grid>
</Grid>
</Box>
); |
Quand je clique sur un item du TreeView, je récupère bien les infos de l'élément json dans selectedItem, le TextField se met bien à jour, mais pas le Select.
Qu'est ce qui cloche?
Merci,
Nico
