我有一个父组件，它通过我的数组进行映射，并打印出各种Child组件的迭代。

我试图在父组件中访问状态，但无法弄清楚如何从子组件中提取“inputValue”的正确状态，并将其放在父组件中。

理想情况下，我希望inputValue和isValidated状态都存在于父组件中，以便我可以在各种基于表单的函数中使用它们。

父组件：

import React, { useState } from 'react';
import { formFieldsData } from './FormFields';
import Input from './Input';

export default function Form() {

    return (
        

            {formFieldsData.map((item) => (
                
            ))}
        
    )
}

子组件：

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 (
        

            {label}: {inputValue}
            {isRangeInput
                ?  handleChange(e)} />
                :  handleChange(e)}
                />
            }
             alert('button click catched')} disabled={!isValidated}>Submit!
        
    )
}