React中如何将子组件的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>
    )
}

状态提升的核心是把原本子组件的状态移到父组件统一管理，再通过props将状态和更新方法传递给子组件，具体实现步骤如下：

1. 父组件初始化统一状态 #

在父组件中创建一个以字段id为键的状态对象，存储所有子组件的inputValue和isValidated：

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

export default function Form() {
    // 基于formFieldsData生成初始状态结构
    const [formState, setFormState] = useState(() => {
        const initialState = {};
        formFieldsData.forEach(item => {
            initialState[item.id] = {
                inputValue: '',
                isValidated: false,
                type: item.type // 存储类型方便后续校验
            };
        });
        return initialState;
    });

    // 后续添加处理函数
}

2. 父组件编写状态更新函数 #

创建处理输入变化的函数，根据字段id更新对应状态，并复用原有的校验逻辑：

const handleInputChange = (id, e) => {
    const value = e.target.value;
    setFormState(prevState => ({
        ...prevState,
        [id]: {
            ...prevState[id],
            inputValue: value,
            isValidated: value.length > 0 || prevState[id].type === 'date'
        }
    }));
};

3. 父组件传递状态与更新方法给子组件 #

遍历渲染Input时，将对应字段的状态和更新函数通过props传递：

return (
    <form>
        {formFieldsData.map((item) => (
            <Input
                key={item.id}
                id={item.id}
                label={item.label}
                type={item.type}
                placeholder={item.placeholder}
                inputValue={formState[item.id].inputValue}
                isValidated={formState[item.id].isValidated}
                onChange={(e) => handleInputChange(item.id, e)}
            />
        ))}
        {/* 父组件统一处理表单提交，可一次性获取所有字段状态 */}
        <button type="submit" onClick={(e) => {
            e.preventDefault();
            console.log('所有表单数据:', formState);
            alert('表单提交成功');
        }}>提交表单</button>
    </form>
);

4. 子组件移除自身状态，使用props #

子组件不再维护inputValue和isValidated，直接使用父组件传递的props，并绑定输入变化回调：

import React from 'react';
import styles from './forms.module.scss';
import RangeInput from './RangeInput';

export default function Input({ type, id, placeholder = '', label, inputValue, isValidated, onChange }) {
    const isRangeInput = type === 'range';

    return (
        <div className={styles.form__row}>
            <label htmlFor={id}>{label}: {inputValue}</label>
            {isRangeInput
                ? <RangeInput id={id} onChange={onChange} />
                : <input
                    required
                    type={type}
                    id={id}
                    name={id}
                    placeholder={placeholder}
                    className={styles.input}
                    value={inputValue}
                    onChange={onChange}
                />
            }
            {/* 如需保留单项提交按钮可保留，建议统一在父组件处理提交 */}
            <button type="button" onClick={() => alert('单项提交')} disabled={!isValidated}>单项提交</button>
        </div>
    )
}

注意事项 #

• 移除子组件中多余的props参数，避免与React的props对象混淆
• 若校验逻辑复杂，可单独拆分validateField函数在父组件中调用，保证逻辑统一
• 表单提交建议统一在父组件处理，方便做整体校验或数据提交

内容的提问来源于stack exchange，提问作者Connor