React中实现TextField随Checkbox选中状态切换显示/隐藏的问题

问题回顾 #

点击「Others, enumerate」复选框时TextField正常显示，但取消选中该复选框后，TextField仍保持打开状态，无法关闭。需求是复选框选中时显示TextField，取消选中时隐藏。

问题根源 #

当前实现通过点击label触发handleClick设置openChoiceId来控制TextField显示，但该逻辑仅处理了打开场景，未处理取消选中的情况；且openChoiceId状态与复选框实际选中状态脱节，即使复选框取消选中，openChoiceId仍保留原值，导致TextField无法关闭。

解决方案 #

方案一：直接基于选中状态判断（推荐） #

无需额外维护openChoiceId状态，直接通过父组件answer.choice数组判断当前选项是否被选中，以此控制TextField的显示：

修改Part4.js中的TextField渲染条件：

{currentChoices.map((choice, index) =>(                  
  <Grid item xs={6} key={index}>                   
    <label className="toggle-button" key={choice.id}>                   
      <input className="toggle-button__state" type="checkbox" name="choice" value={choice.choices} onChange={handleChange}/>                   
      <span className="toggle-button__text">{choice.choices}</span>                    
                    
      <Box sx={{position:'absolute', bottom: 50, left: 0, width: '100%', px: 2}}>                   
        {/* 直接判断当前选项是否在选中列表中 */}
        {choice.essay === true && answer.choice.includes(choice.choices) &&                   
          <TextField                    
            id="filled-multiline-static"                    
            label="Others"                    
            fullWidth                    
            multiline                    
            rows={3}                    
            name="essay" onChange={handleTextFieldChange}                     
            variant="outlined"                  
          />}
      </Box>
    </label>                  
  </Grid>                  
))}

同时删除子组件中多余的状态和函数：

// 删除以下冗余代码
const [openChoiceId, setOpenChoiceId] = useState(null);  
const handleClick = (choice) => {  
  if (choice.essay === true) {  
    setOpenChoiceId(choice.choices);  
  } else {  
  }  
};

方案二：同步状态关联复选框选中状态 #

如果需要保留openChoiceId状态，可通过useEffect监听父组件answer.choice的变化，同步更新openChoiceId：

import { useEffect } from 'react';

// 在Part4.js中添加状态监听逻辑
const [openChoiceId, setOpenChoiceId] = useState(null);  

useEffect(() => {
  // 检查"Others, enumerate"是否在选中列表中
  const isOtherChecked = answer.choice.includes("Others, enumerate");
  setOpenChoiceId(isOtherChecked ? "Others, enumerate" : null);
}, [answer.choice]);

// 渲染部分保留原条件，但删除handleClick函数和label上的onClick绑定
{currentChoices.map((choice, index) =>(                  
  <Grid item xs={6} key={index}>                   
    <label className="toggle-button" key={choice.id}>                   
      <input className="toggle-button__state" type="checkbox" name="choice" value={choice.choices} onChange={handleChange}/>                   
      <span className="toggle-button__text">{choice.choices}</span>                    
                    
      <Box sx={{position:'absolute', bottom: 50, left: 0, width: '100%', px: 2}}>                   
        {openChoiceId === choice.choices && choice.essay === true &&                   
          <TextField                    
            id="filled-multiline-static"                    
            label="Others"                    
            fullWidth                    
            multiline                    
            rows={3}                    
            name="essay" onChange={handleTextFieldChange}                     
            variant="outlined"                  
          />}
      </Box>
    </label>                  
  </Grid>                  
))}

原问题代码参考 #

数据结构 #

{
    "_id": "642d892955e310c62e46b9d3",
    "title": "Question Sample",
    "choices": [
        { "choices": "GAD Orientation", "essay": false },
        { "choices": "Gender Sensitivity Training", "essay": false },
        { "choices": "Gender Mainstreaming", "essay": false },
        { "choices": "GAD Planning and Budgeting", "essay": false },
        { "choices": "GAD Analysis Tools", "essay": false },
        { "choices": "Harmonized Gender and Development Guidelines", "essay": false },
        { "choices": "Gender Mainstreaming Evaluation Framework", "essay": false },
        { "choices": "Others, enumerate", "essay": true },
        { "choices": "None", "essay": false }
    ],
    "type_of_question": true
}

父组件状态与handleChange #

const [answer,setAnswer] = useState({      
  email: email,      
  category: type,      
  affiliation: affiliation,      
  part: `part${getSurveyPart}`,      
  choice: "",      
  essay: "",     
})

const handleChange = (e) => {            
  const value = e.target.value;            
  const inputType = e.target.type;        
  
  let newChoice = answer.choice;        
  
  if (inputType === 'radio') {            
    newChoice = [value];            
  } else if (inputType === 'checkbox') {            
    const isChecked = e.target.checked;            
    const choiceIndex = answer.choice.indexOf(value);            
    if (isChecked) {                
      newChoice = [...answer.choice, value];            
    } else {                
      newChoice = [                
        ...answer.choice.slice(0, choiceIndex),                
        ...answer.choice.slice(choiceIndex + 1),                
      ];            
    }            
  }        
  
  const newAnswer = { ...answer, choice: newChoice };
  setAnswer(newAnswer);        
};

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