Lorsque je sélectionne une option dans le menu déroulant, rien n'est sélectionné car la valeur du role est une chaîne vide. Le framework d'interface utilisateur utilisé est l'interface utilisateur sémantique.
Lorsque l'utilisateur saisit les champs d'entrée, la fonction onChange prend l'entrée et la sauvegarde dans la chaîne vide dans les values . Cependant, cela n'est pas valide lorsque le type d'entrée est un menu déroulant avec des entrées prédéfinies. Par conséquent, lorsque l'utilisateur sélectionne l'une des options, il devient automatiquement une chaîne vide.
Je ne suis pas en mesure de comprendre comment résoudre ce problème.
const [values, setValues] = useState({
username: '',
password: '',
confirmPassword: '',
email: '',
role: '' // This here seems to be the issue.
})
//OnChange Function (works for Input types)
const onChange = (e) => {
setValues({...values, [e.target.name]: e.target.value});
}
//FormInput for reference (working)
<Form.Input
label="Full Name"
placeholder="Full Name"
type="text"
name="username"
value={values.username}
onChange={onChange}
/>
//DropDown menu from SemanticUI
<Dropdown
placeholder="Select Role"
name="role"
fluid
selection
options={options}
value={values.role}
onChange={onChange}
/>
//Options for Dropdown Menu
const options =[
{
key: 'Client',
text: 'Client',
value: 'Client'
},
{
key: 'Employee',
text: 'Employee',
value: 'Employee'
}
]
Mise à jour: ajout de "name"=role dans le menu déroulant. Cependant ne fonctionne toujours pas.
Mise à jour: images ajoutées pour référence
3 Réponses :
Votre Dropdown onChange devrait être quelque chose comme ça
<Dropdown
placeholder="Select Role"
fluid
selection
options={options}
value={values.role}
onChange={(e, {value}) => onChange({
target: {name: 'role', value}
})}
/>
Reportez-vous à la démo d'entrée contrôlée ici: https://react.semantic-ui.com/modules/dropdown/#usage-controlled
EDIT: Si vous ne voulez pas mettre à jour votre fonction onChange , cela le ferait peut-être.
const onChange = (e, {value}) => {
setValues({...values, role: value});
}
Merci, mais je pense que ma fonction onChange est la même. Il prend la valeur des éléments nommés et les ajoute aux valeurs useState.
e.target.name n'est pas défini, cela ne fonctionnera pas pour Dropdown car e.target représente votre élément de liste déroulante
<Dropdown
placeholder="Select Role"
name="role"
id="role"
fluid
selection
options={options}
value={values.role}
onChange={onChange}
/>
on Dropdown props:
add name="role"
Reason why you need to provide "name" prop on each form element to get value on onChange function.
onChange functions looks "e.target.name"
which is you didn't provide any "name" prop on your Dropdown Input.
Merci, mais ça ne marche toujours pas. Lorsque je sélectionne une option, elle redevient vide.
pouvez-vous s'il vous plaît le journal de la console ci-dessous sur la fonction onChange. Voyons ce que vous obtenez lorsque vous modifiez les options de liste déroulante du navigateur. const onChange = (e) => {console.log (e.target.name, e.target.value); setValues ({... valeurs, [e.target.name]: e.target.value}); }
J'ai rencontré le même problème avec un formulaire que je crée et ma solution n'est pas du tout SÈCHE, mais cela fonctionne.
const [state, setState] = useState({
prayer_request:{
name: '',
state:'',
temptation:'',
}
})
const handleChange = (event) =>{
const updateInput = Object.assign({}, formInputs, { [event.target.id]:
event.target.value}, )
updateFormInputs(updateInput)
}
const [requests, setRequests] = useState([])
const [formInputs, updateFormInputs] = useState({
name: '',
state: state,
temptation: state,
})
Pour chaque option dans la liste déroulante, j'ai ajouté l' id="state" pour mon handleChange() et il a pu ensuite prendre n'importe quelle option sélectionnée dans le menu déroulant et la mettre dans mon objet pour la transmettre à ma base de données.
Et mon gestionnaire de changement et useState() hooks useState() sont ci-dessous:
<select name="State" id="state" value={props.formInputs.state} onChange={props.handleChange}>
<option id="state" value="Alabama">AL</option>
<option id="state" value="Alaska">AK</option>
Que voyez-vous dans
e.target.name? Pouvez-vousconsole.log(e.target.name)Est-ce que c'est parce que les éléments de liste déroulante n'ont pas de nom?