傳遞輸入值狀態從父元件到子元件的React方法

Question

我有一個父元件，它透過我的陣列進行映射，並列印出各種Child元件的迭代。

我試圖在父元件中存取狀態，但無法弄清楚如何從子元件中提取「inputValue」的正確狀態，並將其放在父元件中。

理想情況下，我希望inputValue和isValidated狀態都存在於父元件中，以便我可以在各種基於表單的函數中使用它們。

父元件：

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

子元件：

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才是合適的。如果父子元件之間的層級關係擴展，則更適合使用上下文/狀態管理。