React.js 多选下拉选“其他”时动态添加表单输入框及报错解决

错误根因 #

你遇到的TypeError: selected.join is not a function报错，核心原因是多选Select组件要求value属性必须为数组类型，但你的handleCareerChoice方法直接将careerChoice字段赋值为输入框的字符串值，覆盖了原有的数组结构，导致renderValue中调用数组的join方法失败。

具体修复步骤 #

1. 调整状态定义 #

新增单独存储自定义职业输入值的状态，避免直接覆盖多选数组，同时统一显隐控制逻辑：

// 单独存储其他选项的输入值
const [otherCareerValue, setOtherCareerValue] = useState('');
// 控制其他输入框显隐
const [showOtherInput, setShowOtherInput] = useState(false);
// 确保careerChoice初始值为空数组
const [values, setValues] = useState({
  careerChoice: [],
  // 保留你原有其他状态字段
});

2. 修正多选选择逻辑 #

将Other选项和普通选项逻辑对齐，通过选中值自动控制输入框显隐：

const handleChange = (input) => (event) => {
  const selectedValue = event.target.value;
  setValues({ ...values, error: false, [input]: selectedValue });
  // 选中Other时显示输入框，取消选中则隐藏
  setShowOtherInput(selectedValue.includes('Other'));
};

修改Select内的Other MenuItem代码：

<MenuItem value="Other">
  <Checkbox checked={values.careerChoice.indexOf('Other') > -1} />
  <ListItemText primary="Others" />
</MenuItem>

记得删除Select内部多余的<TextField variant="outlined" style={{ width: "100%" }} />代码，该组件放在Select内部会导致渲染异常。

3. 实现自定义值添加逻辑 #

修改其他输入框的交互，点击添加按钮时才把自定义值加入选中数组：

// 只更新其他输入框的单独状态
const handleOtherInputChange = (e) => {
  setOtherCareerValue(e.target.value);
};
// 点击添加按钮的提交逻辑
const handleAddOtherCareer = () => {
  const trimValue = otherCareerValue.trim();
  if (trimValue && !values.careerChoice.includes(trimValue)) {
    // 过滤掉Other标识，加入用户输入的自定义值
    const newCareerList = values.careerChoice
      .filter(item => item !== 'Other')
      .concat(trimValue);
    setValues({...values, careerChoice: newCareerList});
    setOtherCareerValue('');
    // 如需添加后自动关闭输入框，可放开下方注释
    // setShowOtherInput(false);
  }
};

更新自定义输入框的绑定逻辑：

{ showOtherInput  && (
<Grid item xs={11} sm={5} lg={11} sx={{ m: 1 }}>
  <FormControl variant="outlined" fullWidth sx={{ mt: 1 }}>
    <InputLabel htmlFor="other-career-input">
      Other Career Choice
    </InputLabel>
    <OutlinedInput
      id="other-career-input"
      name="otherCareer"
      label="Additional Career Choice"
      fullWidth
      autoComplete="off"
      value={otherCareerValue}
      onChange={handleOtherInputChange}
      endAdornment={
        <InputAdornment position="end">
          <IconButton
            edge="end"
            onClick={handleAddOtherCareer}
          >
          <Add/>
          </IconButton>
        </InputAdornment>
      }
    />
  </FormControl>
</Grid>
)}

4. 增加兜底兼容逻辑 #

给renderValue增加数组判断，避免极端情况报错：

renderValue={(selected) => Array.isArray(selected) ? selected.join(", ") : ''}

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