React关闭模态框后展示react-select多选选中项的实现问题

实现思路 #

你需要把模态框内两个组件的选中值同步到父组件存储，关闭模态框时将存储的值渲染到页面即可，具体修改步骤如下：

1. 父组件新增状态存储选中值
   在当前代码的父组件内声明三个状态，分别存储下拉多选值、自定义输入值、最终要在页面展示的合并值：

// 导入useState
import { useState } from 'react';

// 组件内声明状态
const [selectedMultiOptions, setSelectedMultiOptions] = useState([]); // 存储ReactSelect选中的下拉选项
const [createdInputValues, setCreatedInputValues] = useState([]); // 存储CreatableInputOnly的输入/创建值
const [finalShowValues, setFinalShowValues] = useState([]); // 关闭模态框后要展示的所有值

2. 给子组件绑定值变更回调

• 给ReactSelect组件新增onChange属性，实时同步下拉选中值到父组件状态
• 改造CreatableInputOnly组件，新增onValueChange回调属性，内部值变化时将值回传给父组件

修改后的JSX部分代码如下：

<Fragment>
  <Button onClick={handleClickOpen}>ModalButton</Button>
  <div>Selected options on the modal were: {finalShowValues.map(item => item?.label || item).join('、')}</div>
  <Dialog
    maxWidth={"sm"}
    fullWidth={true}
    open={open}
    onClose={handleClose}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
    classes={{
      paperFullWidth: classes.paperFullWidth
    }}
  >
    <DialogTitle id="alert-dialog-title">Dialog</DialogTitle>
    <DialogContent
      classes={{
        root: classes.dialogContentRoot
      }}
    >
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <FormControl style={{ width: "100%" }}>
            <ReactSelect 
              isMulti={true} 
              options={country} 
              onChange={(val) => setSelectedMultiOptions(val || [])}
            />
          </FormControl>
        </Grid>
      </Grid>
      <Grid container spacing={2}>
        <CreatableInputOnly 
          onValueChange={(val) => setCreatedInputValues(val || [])}
        />
      </Grid>
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} variant="contained">
        Close
      </Button>
    </DialogActions>
  </Dialog>
</Fragment>

3. 改造CreatableInputOnly组件
   在该组件内部监听自身值的变化，通过回调同步给父组件：

const CreatableInputOnly = ({ onValueChange }) => {
  // 原有内部状态，比如存储输入/创建的值
  const [internalValues, setInternalValues] = useState([]);

  // 新增监听：内部值变化时调用父组件传入的回调同步值
  useEffect(() => {
    onValueChange?.(internalValues);
  }, [internalValues, onValueChange]);

  // 剩余原有逻辑保持不变
  // ...
}

4. 修改关闭模态框的逻辑
   在handleClose方法里合并两个来源的选中值，赋值给展示状态：

const handleClose = () => {
  // 合并下拉选中值和自定义输入值，可根据实际需求调整合并逻辑
  const allSelected = [...selectedMultiOptions, ...createdInputValues];
  setFinalShowValues(allSelected);
  setOpen(false);
};

补充说明 #

如果需要区分「取消关闭」和「确认关闭」，可以在模态框底部新增确认按钮，仅点击确认时才同步值到展示状态，点击取消直接关闭模态框即可，避免用户未保存的修改被渲染到页面。

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