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

Question

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

Answer 1

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.