关闭模式后在屏幕上输入多个 select 文本

Question

我有一个模态，在关闭模态后，我想在屏幕上显示在模态上选择的选项。

我的代码在这里：https://codesandbox.io/s/react-select-xdpj7?file=/src/CreatableInputOnly.tsx

在下面的这个片段中，我调用了 CreatableInputOnly 上处理模态文本的部分。处理下拉列表的部分在 ReactSelect 调用中：

<Fragment>
      <Button onClick={handleClickOpen}>ModalButton</Button>
      <div>Selected options on the modal were: </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} />
              </FormControl>
            </Grid>
          </Grid>
          <Grid container spacing={2}>
            <CreatableInputOnly />
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} variant="contained">
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </Fragment>

Answer 1

您可以在ModalTest.tsx中创建一个状态变量并将setter函数传递给select组件reactMaterialSelect.tsx。

const [selectedValues, setSelectedValues] = React.useState([]);

然后，您可以更新代码，这将显示 selected 选项。它只是一个简单的地图函数，打印每个索引项的 label。

<div>
    Selected options on the modal were:{" "}
    {selectedValues?.length
      ? selectedValues.map((item, idx) =>
          idx !== 0 ? `, ${item.label}` : item.label
        )
      : ""}
</div>

更新组件部分以发送状态 setter 值的附加道具。

<ReactSelect
   handleSelectValues={setSelectedValues}
   isMulti={true}
   options={country}
 />

在reactMaterialSelect.tsx中，更改函数被更新以更改父变量中的状态。

function handleChangeSingle(value) {
  setSingle(value);
  handleSelectValues([value]);
}

function handleChangeMulti(value) {
  setMulti(value);
  handleSelectValues(value);
}

为了管理 createdInputs，添加了一个新的状态变量。

const [createAbleInputs, setCreateAbleInputs] = React.useState([]);

组合两种状态结果的变量。

const combinedArray =
createAbleInputs === null
  ? [...selectedValues]
  : [...selectedValues, ...createAbleInputs];

然后更新组件 createableInputsOnly 以根据组件中的更改更改模态中的状态。

Updated sandbox link.

关闭模式后在屏幕上输入多个 select 文本

Multi-select text input on screen after closing modal

modal-dialog

reactjs

react-select