Discussion :

[Ushuango]

Bonjour,

j'ai chois de faire un formulaire un peu spécial !!!
Je vais chercher mes options des champs select dans une BDD

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, {useState, useEffect} from "react";
import { stateForm } from "./datas";
 
export default function AnimalForm(props) {
 
    const [form, setForm] = useState(stateForm)
 
    const Field = ({param}) => {
 
        let inputField = ""
 
        const Select = ({table}) => {
 
            const [error, setError] = useState(null)
            const [options, setOptions] = useState([])
 
             //get iri and option name for each field
            const extractDatas = (datas) => {
                let arrayDatas = []
                for ( const data of datas) {
                    // nem key in data
                    const name = data["@type"].toLowerCase() + "Name"
                    // iri
                    const id = data["@id"]
                    arrayDatas.push([id, data[name]])
                }
                return arrayDatas
            }
 
            useEffect ( () => {
                fetch('api/' + table)
                .then( response => response.json())
                .then( 
                    result => {
                        setOptions(extractDatas(result["hydra:member"]))
                    },
                    error => setError(error)
                    )
            }, [])
 
            return (   
                <select value={form[param.entityField]} onChange={handleChange} name={param.entityField}>
                    <option value=""></option>
                    {options.map( op => <option key={op[0]} value={op[0]}>{op[1]}</option> )}
                </select>
            )
        }
 
        const onChange = (ev) => {
 
            const {name, value} = ev.target
 
            setForm( (state) => ({
                ...state, [name]: value
            }))
        }
 
        switch (param.type) {
            case 'text':
                inputField =  <input type="text" id={param.entityField} onChange={onChange} value={form[param.entityField]} name={param.entityField}/>;
                break;
            case 'select':
                inputField = <Select table={param.table}/>;
                break;
        }
 
        return (
            <div className="form-group">
                    <label htmlFor={param.entityField}>{param.labelName}
                    {inputField}
                    </label>
            </div>
        )
    }
 
    const handleSubmit = (ev) => {
        console.log('je soumet')
        ev.preventDefault()
        let url = "api/animal"
        for ( const key in form) {
            if (form[key]) {
                url = url + "?" + key + "=" + form[key]
            }
        }
    }
 
    return (
        <form onSubmit={handleSubmit}>
            {props.fields.map( f => <Field param={f} key={f.entityField}/>)}
            <button type="submit" className="btn btn-primary">rechercher</button>
        </form>
    )
}

et voici aussi mon stateForm:

Code text :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const stateForm = {
    animalName: '',
    diet: '',
    species: '',
    continent: ''
}

et pour terminer les props.fields :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const fullFields = [
    {'labelName': 'nom', 'type': 'text', 'entityField': 'animalName', 'table': 'animals'},
    {'labelName': 'régime', 'type': 'select', 'entityField': 'dietName', 'table': 'diets'},
    {'labelName': 'espèce', 'type': 'select', 'entityField': 'speciesName', 'table': 'species'},
    {'labelName': 'continent', 'type': 'select', 'entityField': 'continentName', 'table': 'continents'}
]

Ça fonctionne presque bien.
le résultat est un formulaire avec un champ texte et trois champs select.
Je peux sélectionner les options dans les champs select, mais dans le champ texte, il y a un problème:
je rentre une lettre et :


Je dois par la suite cliquer dans le champ pour rentrer une nouvelle lettre...
la valeur change et j'ai mes deux lettres dans le input, mais si je veux une troisième, je reclique, ...

je ne comprend pas ce qu'il se passe. Pourtant, le onChange est exécuté, mon objet form a bien changé, mais je ne comprends pas ce qu'il se passe ensuite...
avec un formulaire plus classique :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="animalName">
                nom
                <input type="text" value={form.animalName} onChange={onChange} name="animalName"/>
            </label>
            {/* {props.fields.map( f => <Field param={f} key={f.entityField}/>)} */}
            <button type="submit" className="btn btn-primary">rechercher</button>
        </form>
    )

Je n'ai pas de souci. pourquoi les champs sélection ne posent pas de problème ?

[Ushuango]

Ce qui me chiffonne le plus , c'est le fait que la liste qui devrait s'afficher lors de la recherche se trouve en haut à gauche de ma page,
au lieu d'être en-dessous du input comme d'habitude !

Évidemment i doit y avoir un lien avec le fait que je ne peux écrire qu'un lettre à la fois.
Mon curseur change de place ???

C'est un phénomène que je ne connais pas , vraiment . Si quelqu'un a une idée.
Merci,

Laurent.

[Dave Hiock]

\ô/
si je ne m'abuse tu utilises une élément select et non un élément datalist, lié à ton input, qui correspondrait mieux à ce que tu veux faire et qui placerait celui-ci au bon endroit par défaut.

Le remplissage d'un datalist est semblable à celui d'un select via les options.

[Ushuango]

Non, mes éléments select fonctionnent comme il se doit !

C'est l'élément text que je dois mettre dans le dernier return ,( celui de mon composant ) , sinon, j'ai l'effet expliqué plus haut.
Mes éléments select, je peux faire un composant Select qui va les retourner tous.
J'aimerais en faire de même avect un composant Text , pour retourner tous les éléments texte.

Pour l'instant , je laisse comme ça , ça fonctionne aussi...