时间戳

首页 > 解决方案 > 在同一视图中具有 Material UI 的多个自动完成字段

reactjs - 在同一视图中具有 Material UI 的多个自动完成字段

问题描述

默认情况下，我的视图中有 2 个自动完成字段，但您可以每次单击添加更多字段。

目前我遇到的问题是每个自动完成字段都会打开每个自动完成字段的每个结果列表，因为每个字段都使用“打开”。我如何让它动态地实现整个事情？

const [value, setValue] = useState<string>('')
const [open, setOpen] = useState(false)

 <Autocomplete
        options={props.results.map((option) => option.name)}
        renderOption={(option) => (
            <Typography noWrap>
                {option}
            </Typography>
        )}
        onClose={() => {
            setOpen(false)
        }}
        open={open}
        renderInput={(params) => (
            <Paper className={search.root} ref={params.InputProps.ref}>
                <IconButton className={search.iconButton} disabled>
                    <FiberManualRecordIcon color="secondary" />
                </IconButton>
                <InputBase
                    {...params.inputProps}
                    className={search.input}
                    placeholder="Test"
                    value={value}
                    onChange={(event: any) => setValue(event.target.value)}
                />
                <IconButton
                    className={search.iconButton}
                    disabled={!value}
                >
                    <SearchIcon />
                </IconButton>
            </Paper>
        )}
    />

标签： reactjsmaterial-ui

解决方案

由于此问题的日期，您可能已经解决了这个问题。但是我将把我为解决这个问题所做的事情放在这里，因为我在使用 Formik 的 FieldArray 时遇到了同样的问题。

Material UI 文档有时会有些混乱，因此请尽量忽略示例中的一些内容。

移除 open、onOpen 和 onClose 道具。如果您想创建某种自动打开/关闭机制，您只需要这些道具。

这是我在做什么以及如何解决它的一个例子。

            <Autocomplete
              id={`items.${index}.partNumber`}
              name={`items.${index}.partNumber`}
              freeSolo
              style={{ width: 300 }}
              open={openPartNumber}
              onOpen={() => setOpenPartNumber(true)}
              onClose={() => setOpenPartNumber(false)}
              options={partNumbers}
              clearOnBlur={false}
              getOptionLabel={option => (option.label ? option.label : '')}
              value={item.partNumber}
              inputValue={item.partNumber}
              onInputChange={(event, newInputValue) => {
                if (event) {
                  setFieldValue(`items.${index}.partNumber`, newInputValue);
                  getPartNumberList(newInputValue);
                }
              }}
              onChange={(event, optionSelected, reasson) => {
                if (reasson === 'select-option') {
                  setFieldValue(`items.${index}.partNumber`, optionSelected.partNumber);
                  setFieldValue(`items.${index}.vendorNumber`, optionSelected.vendorNumber);
                  setFieldValue(`items.${index}.description`, optionSelected.description);
                  setFieldValue(`items.${index}.ncm`, optionSelected.ncm);
                }
              }}
              filterOptions={x => x}
              ...otherPrps...
            />

然后我只删除了打开、onOpen 和 onClose 的道具。

            <Autocomplete
              id={`items.${index}.partNumber`}
              name={`items.${index}.partNumber`}
              freeSolo
              style={{ width: 300 }}
              options={partNumbers}
              clearOnBlur={false}
              getOptionLabel={option => (option.label ? option.label : '')}
              value={item.partNumber}
              inputValue={item.partNumber}
              onInputChange={(event, newInputValue) => {
                if (event) {
                  setFieldValue(`items.${index}.partNumber`, newInputValue);
                  getPartNumberList(newInputValue);
                }
              }}
              onChange={(event, optionSelected, reasson) => {
                if (reasson === 'select-option') {
                  setFieldValue(`items.${index}.partNumber`, optionSelected.partNumber);
                  setFieldValue(`items.${index}.vendorNumber`, optionSelected.vendorNumber);
                  setFieldValue(`items.${index}.description`, optionSelected.description);
                  setFieldValue(`items.${index}.ncm`, optionSelected.ncm);
                }
              }}
              filterOptions={x => x}
              ...otherPrps...
            />

推荐阅读