React-Methode zum Übergeben des Eingabewertstatus von der übergeordneten Komponente an die untergeordnete Komponente

Question

Ich habe eine übergeordnete Komponente, die mein Array abbildet und eine Iteration der verschiedenen untergeordneten Komponenten ausgibt.

Ich versuche, auf den Status in der übergeordneten Komponente zuzugreifen, kann aber nicht herausfinden, wie ich den korrekten Status für den „inputValue“ aus der untergeordneten Komponente extrahieren und in die übergeordnete Komponente einfügen kann.

Idealerweise möchte ich, dass sowohl der InputValue- als auch der isValidated-Zustand in der übergeordneten Komponente vorhanden sind, damit ich sie in verschiedenen formularbasierten Funktionen verwenden kann.

Übergeordnete Komponente:

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

Unterkomponente:

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

最简单的方法是在父组件中管理状态。然后，您只需要将一个函数作为prop传递给子组件，以更新父组件的状态。这是我之前回答一个相关问题的示例，演示了如何从子组件传递数据给父组件。

请注意，只有在直接子组件中进行这种prop drilling才是合适的。如果父子组件之间的层级关系扩展，则更适合使用上下文/状态管理。