如何在React可复用MUI组件中操作formData对象的属性

你可以通过给复用组件传入对应字段名+父级状态更新函数的方式实现需求，无需调整你现有formData的结构，具体修改如下：

1. 修改InputField组件 #

新增fieldName（对应formData中的属性名）、setFormData（父级传入的状态更新函数）两个prop，在组件内部绑定onChange事件更新对应字段：

export default function InputField(props){
    const handleInputChange = (e) => {
        // 用计算属性动态更新对应字段，保留原有formData的其他值
        props.setFormData(prevFormData => ({
            ...prevFormData,
            [props.fieldName]: e.target.value
        }))
    }

    return(
        <TextField
            fullWidth
            value={props.value}
            variant='standard'
            onChange={handleInputChange}
        />
    )
}

2. 调整父组件调用逻辑 #

父组件中调用InputField时，传入对应字段名和你定义formData时的setFormData方法即可：

// 父组件中formData的定义示例
const [formData, setFormData] = useState({
    nickname: '',
    language: '',
    occupation: ''
})

// 组件调用写法
<QuestionLabel>Do you have a "Nickname":</QuestionLabel>
<InputField 
    value={formData.nickname}
    fieldName="nickname"
    setFormData={setFormData}
/>

<QuestionLabel>Preferred Language:</QuestionLabel>
<InputField 
    value={formData.language}
    fieldName="language"
    setFormData={setFormData}
/>

<QuestionLabel>Occupation:</QuestionLabel>
<InputField 
    value={formData.occupation}
    fieldName="occupation"
    setFormData={setFormData}
/>

可选优化 #

如果你的问卷页面嵌套层级深、问题数量多，不想逐层传递setFormData，可以用React Context把formData和setFormData全局包起来，InputField组件内部直接通过useContext获取更新方法即可，不用每次调用都传setFormData。

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