Kaedah bertindak balas untuk menghantar keadaan nilai input daripada komponen induk kepada komponen anak

Question

Saya mempunyai komponen induk yang memetakan melalui tatasusunan saya dan mencetak lelaran pelbagai komponen Kanak-kanak.

Saya cuba mengakses keadaan dalam komponen induk tetapi tidak dapat mengetahui cara mengekstrak keadaan yang betul untuk "inputValue" daripada komponen anak dan meletakkannya dalam komponen induk.

Sebaik-baiknya, saya ingin kedua-dua keadaan inputValue dan isValidated wujud dalam komponen induk supaya saya boleh menggunakannya dalam pelbagai fungsi berasaskan bentuk.

Komponen induk:

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

Subkomponen:

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

Cara paling mudah ialah mengurus keadaan dalam komponen induk. Kemudian anda hanya perlu lulus fungsi sebagai prop kepada komponen anak untuk mengemas kini keadaan komponen induk. Berikut ialah contoh yang saya jawab kepada soalan berkaitan sebelum ini, menunjukkan cara menghantar data daripada komponen anak kepada komponen induk.

Sila ambil perhatian bahawa penggerudian prop seperti ini hanya sesuai dalam komponen anak langsung. Jika hubungan hierarki antara komponen ibu bapa dan anak berlanjutan, pengurusan konteks/keadaan adalah lebih sesuai.