Question

我想在placeholder字段中创建一个动态input。我有一个array的过滤器，如下所示：

const filters = [
    {
        id: "rechercher",
        label: "Rechercher",
        icon: <SearchIcon />
    },
    {
        id: "contient",
        label: "Contient",
        icon: <DirectionsBoatIcon />
    },
    {
        id: "neContientPas",
        label: "Ne contient pas",
        icon: <AccountBalanceWalletIcon />
    },
    {
        id: "commencePar",
        label: "Commence par",
        icon: <BookmarksIcon />
    },
    {
        id: "finitPar",
        label: "Finit par",
        icon: <BrandingWatermarkIcon />
    },
    {
        id: "estEgal",
        label: "Est égal à",
        icon: <BusinessCenterIcon />
    },
    {
        id: "estPasEgal",
        label: "N'est pas égal à",
        icon: <CameraIcon />
    }
];

当前过滤器的状态（使用钩子）：

const [currentFilter, setCurrentFilter] = React.useState(<FilterListIcon/>);

dropdown菜单以选择过滤器：

<div className={classes.boxFilter}>
    <IconButton onClick={handleClickDropdown('filter')}>
        {currentFilter}
    </IconButton>
    <Menu
        id="simple-menu"
        anchorEl={anchorEl.filter}
        keepMounted
        open={Boolean(anchorEl.filter)}
        onClose={handleCloseDropdown}
    >
        {filters.map((element, idx) => {
            return (
                <MenuItem
                    key={idx}
                    onClick={() => {
                        updateCurrentFilter(element.id);
                        setCurrentFilter(element.icon);
                        handleCloseDropdown();
                    }}
                    onClose={handleCloseDropdown}
                    value={element.label}
                >
                    {element.icon}
                    <span style={{marginLeft: "0.5rem"}}>{element.label}</span>
                </MenuItem>
            );
        })}
    </Menu>
</div>

input字段带有“非动态” placeholder：

<Input
  placeholder="Filtre.."
  inputProps={{
    "aria-label": "description"
  }}
/>

我想根据选择的过滤器更改占位符。我想做一个功能来管理这个，但是我不知道该怎么做。当我进入input字段时，我不在.map范围内，所以我不再知道。欢迎您的帮助。

Answer 1

您可以设置当前所选输入的状态：

声明：

const [selectedInput, setSelectedInput] = useState(null);

并且您只需要在单击菜单中的项目时使用setSelectedInput

并在输入中：

<Input
  placeholder= {selectedInput}
  inputProps={{
    "aria-label": "description"
  }}
/>

使用钩子在Reactjs中创建动态占位符

1 个答案: