React动态表单如何通过复选框仅禁用同组的单个输入框

问题说明 #

• 预期效果：勾选某一分组内的复选框时，仅禁用当前分组下的「完成日期」输入字段，不影响其他分组的同名字段
• 异常表现：现有代码触发禁用逻辑时，会将所有分组的完成日期字段一并禁用

问题原因 #

代码中单独维护了全局的checked状态统一控制所有完成日期输入框的禁用状态，没有做分组维度的状态隔离。实际上每个分组数据里的inline字段已经存储了当前分组复选框的勾选值，不需要额外维护全局状态。

修复步骤 #

• 删除冗余的全局checked状态声明
• 移除输入变更逻辑里多余的全局checked状态更新代码
• 完成日期输入框的禁用属性直接绑定当前遍历分组的inline字段值
• 补全受控输入框的value绑定、列表渲染的key属性，避免React运行告警

修复后完整代码 #

const [inputList, setInputList] = useState([
    { 
        startDate: "",            
        completionDate: "",
        inline: false 
    }
])
const handleInputChange = (e, index, val) => {
    const { name, value } = e.target
    const list = [...inputList]
    list[index][name] = val !== undefined ? val : value 
    setInputList(list)
}
const handleRemoveClick = (index) => {
    const list = [...inputList]
    list.splice(index, 1)
    setInputList(list)
}
const handleAddClick = () => {
    setInputList([
        ...inputList,
        { 
            startDate: "",            
            completionDate: "",
            inline: false 
        }
    ])
}
let embed = {
    embed: {
        fields: inputList
    }
}    
// 表单渲染
{inputList.map((x, i) => {                
    return (
        <>           
            <FormControl key={i}>
                <Box>
                    <FormLabel htmlFor='startDate'>Start Date:</FormLabel>                      
                    <Input 
                        name="startDate"
                        value={x.startDate}
                        onChange={(e) => handleInputChange(e, i)}              
                        type='text' 
                        placeholder='Start Date' 
                    />                                                
                </Box>
                <Box>
                    <FormLabel htmlFor='completionDate'>Completion Date:</FormLabel>                        
                    <Input 
                        name="completionDate"
                        value={x.completionDate}
                        isDisabled={x.inline}
                        onChange={(e) => handleInputChange(e, i)} 
                        type='text' 
                        placeholder='Completion Date' 
                    />                                                
                </Box>                
                <Box pt={{ base: '0', md: '2.7rem'}}>                       
                    <Checkbox  
                        type="checkbox" 
                        name="inline" 
                        checked={x.inline}                                     
                        onChange={(e) => handleInputChange(e, i, e.target.checked)}
                        colorScheme='purple'>
                            <label>Studying</label>
                    </Checkbox>  
                </Box>                                 
            </FormControl>           
            {inputList.length - 1 === i && (
                <Button onClick={handleAddClick}> + New Section </Button> 
                )}
            {inputList.length !== 1 && (
                <Button  onClick={() => handleRemoveClick(i)}>- Remove Section</Button> 
            )}                      
        </>
    )
})} 

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