Maison  >  Questions et réponses  >  le corps du texte

Méthode React pour transmettre l'état de la valeur d'entrée du composant parent au composant enfant

J'ai un composant parent qui mappe mon tableau et imprime une itération des différents composants enfants.

J'essaie d'accéder à l'état dans le composant parent mais je n'arrive pas à comprendre comment extraire l'état correct pour la "inputValue" du composant enfant et le mettre dans le composant parent.

Idéalement, j'aimerais que les états inputValue et isValidated existent dans le composant parent afin de pouvoir les utiliser dans diverses fonctions basées sur un formulaire.

Composant parent :

import React, { useState } from 'react';
import { formFieldsData } from './FormFields';
import Input from './Input';

export default function Form() {

    return (
        <form>
            {formFieldsData.map((item) => (
                <Input
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    type={item.type}
                    placeholder={item.placeholder}
                />
            ))}
        </form>
    )
}

Sous-composant :

import React, { useState } from 'react';
import styles from './forms.module.scss';
import RangeInput from './RangeInput';

export default function Input({ type, id, placeholder = '', label, props }) {
    const [inputValue, setInputValue] = useState('');
    const [isValidated, setIsValidated] = useState(false);
    const isRangeInput = type === 'range';

    const handleChange = (e) => {
        setInputValue(e.target.value)
        if(inputValue.length >  0 || type === 'date') {
            setIsValidated(true)
        }
    }

    return (
        <div className={styles.form__row}>
            <label htmlFor={id}>{label}: {inputValue}</label>
            {isRangeInput
                ? <RangeInput id={id} onChange={(e) => handleChange(e)} />
                : <input
                    required
                    type={type}
                    id={id}
                    name={id}
                    placeholder={placeholder}
                    className={styles.input}
                    value={inputValue}
                    onChange={(e) => handleChange(e)}
                />
            }
            <button type="submit" id="formSubmit" onClick={() => alert('button click catched')} disabled={!isValidated}>Submit!</button>
        </div>
    )
}
P粉300541798P粉300541798418 Il y a quelques jours658

répondre à tous(1)je répondrai

  • P粉038161873

    P粉0381618732023-09-17 20:40:10

    Le moyen le plus simple est de gérer l'état dans le composant parent. Ensuite, il vous suffit de passer une fonction comme accessoire au composant enfant pour mettre à jour l'état du composant parent. Voici un exemple auquel j'ai répondu à une question connexe plus tôt, montrant comment transmettre des données d'un composant enfant à un composant parent.

    Veuillez noter que ce type de perçage d'accessoires n'est approprié que dans les composants enfants directs. Si la relation hiérarchique entre les composants parents et enfants s'étend, la gestion contexte/état est plus adaptée.

    répondre
    0
  • Annulerrépondre