Pourriez-vous s'il vous plaît me dire comment obtenir la valeur du champ de saisie lors du clic sur le bouton dans react, j'utilise des hooks de réaction. Je veux obtenir la valeur du first name
et du lastname
en cliquant sur le bouton. Je passe déjà l'attribut de name
dans mon composant de fonction.
Voici mon code
import React, { Component, useState } from 'react'; import { render } from 'react-dom'; export default function InputField({name,label}) { const [state, setState] = useState('') return ( <div> <label>{label}</label> <input type="text" value={state} name={name} onChange={(e) => setState(e.target.value)} /> {state} </div> ); }
9 Réponses :
Eh bien, un moyen simple (mais pas nécessairement recommandé) est de fournir un identifiant ou une référence comme celui-ci dans index.js
export default function InputField({name,label,id,setState,state}) { return ( <div> <label>{label}</label> <input type="text" value={state} name={name} onChange={(e) => setState(e.target.value)} id= {id}/> </div> );
et dans votre inputfield.js, passez les accessoires id aux champs d'entrée comme celui-ci
function App() { const [stateIp1, setStateIp1] = useState(''); const [stateIp2, setStateIp2] = useState(''); const handleClickEvent = ()=>{ alert(stateIp1); } return ( <div> <InputField label={'first name'} state={stateIp1} setState={setStateIp1} name={'firstname'} id={"ip1"}/> <InputField label={'last name'}state={stateIp2} setState={setStateIp2} name={'lastname'} id={"ip2"}/> <button onClick={handleClickEvent} >Get value</button> </div> ); }
Vous pouvez maintenant les appeler dans le onClick du bouton comme celui-ci dans index.js
const handleClickEvent = ()=>{ alert(document.getElementById("ip1").value); }
Le deuxième moyen, plus préférable, consiste à définir la variable d'état dans index.js
<input type="text" value={state} name={name} onChange={(e) => setState(e.target.value)} id= {id}/>
Maintenant, votre inputfield.js devient
<InputField label={'first name'} name={'firstname'} id={"ip1"}/> <InputField label={'last name'} name={'lastname'} id={"ip2"}/>
vous devez éviter d'utiliser le document
dans react. Voir: stackoverflow.com/questions/38093760/...
@KareemDabbeet Oui, je sais c'est pourquoi j'ai dit "moyen simple (mais pas forcément recommandé)" et j'ai aussi édité la réponse avec la deuxième option .... J'ai accidentellement posté seulement la première partie de ma réponse
Vous pouvez toujours augmenter l'état du composant parent. codeSandbox lien
Composant parent
import React from "react"; const ChildComponent = ({ label, onChange, value, name }) => { return ( <div> <label>{label}</label> <input type="text" value={value} name={name} onChange={onChange} /> </div> ); }; export default ChildComponent;
Composant enfant
import React from "react"; import ReactDOM from "react-dom"; import ChildComponent from "./Child"; const { useState } = React; function App() { const [first_name, setFirstName] = useState(""); const [last_name, setLastName] = useState(""); const handleFirstNameChange = ({ target }) => { setFirstName(target.value); }; const handleLastNameChange = ({ target }) => { setLastName(target.value); }; const handleClick = () => { console.log(first_name); console.log(last_name); }; return ( <div className="App"> <ChildComponent label="first name" onChange={handleFirstNameChange} value={first_name} /> <ChildComponent label="last name" onChange={handleLastNameChange} value={last_name} /> <button onClick={handleClick}>Click me</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Vous pouvez toujours combiner le gestionnaire onChange pour le prénom et le nom.
J'espère que ça t'as aidé!!!
Je peux penser à ces approches -
App.js
<input value={props.value} onChange={(e) => setValue(e.target.value)} />
InputField.js
const [user, setUser] = useState(''); return ( <Inputfield setValue={setUser} value={user} /> );
ref
pour accéder à la valeur d'un élément individuel.Context
J'espère que cela t'aides!
Faites-moi savoir si vous avez besoin de plus d'informations sur l'une des options. Merci!
Une bonne solution consiste à déplacer l'état du composant InputField vers l'index:
<input type="text" value={value} name={name} onChange={(e) => changed(e.target.value)} />
maintenant, vous devez passer la valeur d'état et le gestionnaire d'événements à InputField pour changer l'état lorsque l'entrée est modifiée:
<InputField label={'first name'} name={'firstname'} value={F_name} changed={(name) => setF_name(name)}/>
Dans votre champ InputField: modifiez-le pour qu'il ressemble à:
const [F_name, setF_name] = useState('') const [L_name, setL_name] = useState('')
Vous devez faire fonctionner les hooks de réaction sur votre index et transmettre la valeur et la fonction onChange à votre composant InputField.
// input field import React, { Component, useState } from 'react'; import { render } from 'react-dom'; export default function InputField({name,label, value, onChange}) { return ( <div> <label>{label}</label> <input type="text" value={value} name={name} onChange={(e) => onChange(e.target.value)} /> {value} </div> ); }
//index page import React, { Component, useState } from 'react'; import { render } from 'react-dom'; import InputField from './inputfield'; import './style.css'; function App() { const [firstname, setFirstName] = useState(''); const [lastname, setLastName] = useState(''); const handleClickEvent = ()=>{ setFirstName('Will'); setLastName('smith'); } return ( <div> <InputField label={'first name'} name={'firstname'} value={firstname} onChange={setFirstName} /> <InputField label={'last name'} name={'lastname'} value={lastname} onChange={setLastName} /> <button onClick={handleClickEvent} >Get value</button> </div> ); } render(<App />, document.getElementById('root'));
Tout en gardant la majorité de votre structure la même, je pense que la solution la plus simple et la plus React est d'utiliser forwardRef()
qui, en un forwardRef()
, nous permet de communiquer entre les composants parent et enfants.
Voir le bac à sable fonctionnel.
import React, { useState } from "react"; const InputField = React.forwardRef((props, ref) => { const [state, setState] = useState(""); return ( <div> <label>{props.label}</label> <input ref={ref} type="text" value={state} name={props.name} onChange={e => setState(e.target.value)} /> {state} </div> ); }); export default InputField;
import React, { useRef } from "react"; import InputField from "./InputField"; import ReactDOM from "react-dom"; function App() { const handleClickEvent = () => { if (firstName.current && lastName.current) { console.log(`firstName: ${firstName.current.value}`); console.log(`lastName: ${lastName.current.value}`); } }; const firstName = useRef(null); const lastName = useRef(null); return ( <div> <InputField ref={firstName} label={"first name"} name={"firstname"} /> <InputField ref={lastName} label={"last name"} name={"lastname"} /> <button onClick={handleClickEvent}>Get value</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Notez qu'avec cette structure, vous n'êtes pas obligé de transmettre une fonction de mise à jour d'état comme props
au composant InputField
. La valeur que vous entrez dans chaque entrée sera strictement maintenue par le composant individuel. Il est indépendant du Parent
et le rend donc beaucoup plus réutilisable.
Les références que nous avons créées nous permettent de puiser dans des éléments spécifiques de InputField
afin d'extraire les valeurs souhaitées. Dans ce cas, nous pouvons obtenir le prénom et le nom via la fonction handleClickEvent
.
Utiliser la
<form>
avec le hookuseRef
Enveloppez vos balises
<InputField>
avec une<form>
html et mettez uneref
réaction sur la dernière. Comme ça:import React, { Component, useRef } from 'react' import { render } from 'react-dom' import InputField from './inputfield' import './style.css' function App () { const nameForm = useRef(null) const handleClickEvent = () => { const form = nameForm.current alert(`${form['firstname'].value} ${form['lastname'].value}`) } return ( <div> <form ref={nameForm}> <InputField label={'first name'} name={'firstname'}/> <InputField label={'last name'} name={'lastname'}/> </form> <button onClick={handleClickEvent}>gett value</button> </div> ) } render(<App />, document.getElementById('root'))Exemple de travail: https://stackblitz.com/edit/react-shtnxj
vous pouvez y parvenir en procédant comme suit:
import React, { Component, useState } from 'react'; import { render } from 'react-dom'; export default function InputField({name,label}) { const [state, setState] = useState(''); const handleChange = e => { setState(e.target.value); }; return ( <div> <label>{label}</label> <input type="text" value={state} name={name} onChange={handleChange} /> {state} </div> ); }
Espère que cela aide.
Le moyen le plus useRef
pour moi est d' useRef
Avec useRef
c'est assez simple. Ajoutez simplement le nom de la ref
, puis soumettez.
const email = useRef(null); function submitForm(e){ e.preventDefault(); console.log(email.current.value); } return ( <div> <form onSubmit={submitForm}> <input type="text" ref={email} /> <button>Submit</button> </form> </div> )
Bonjour user944513, avez-vous eu de la chance d'intégrer une solution à ce problème?