7
votes

comment obtenir la valeur du champ de saisie sur un clic sur le bouton en réaction?

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>
  );

}

javascript reactjs

1 commentaires

Bonjour user944513, avez-vous eu de la chance d'intégrer une solution à ce problème?

9 Réponses :

0
votes

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"}/>

2 commentaires

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

2
votes

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é!!!

0 commentaires

0
votes

Je peux penser à ces approches -

Vous pouvez extraire l'état jusqu'au composant parent.

App.js

<input value={props.value}  onChange={(e) => setValue(e.target.value)} />

InputField.js

const [user, setUser] = useState('');

return (
 <Inputfield setValue={setUser} value={user} />
);

Vous pouvez utiliser ref pour accéder à la valeur d'un élément individuel.

Si vous avez des données réparties sur plusieurs composants, vous pouvez également utiliser l'API de 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!

0 commentaires

1
votes

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('')

Voir la démo de travail ici

0 commentaires

0
votes

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'));

0 commentaires

0
votes

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.

App.js

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;

InputField.js

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 .

0 commentaires

6
votes

Utiliser la <form> avec le hook useRef

Enveloppez vos balises <InputField> avec une <form> html et mettez une ref 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

0 commentaires

0
votes

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.

0 commentaires

0
votes

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>
)

0 commentaires