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