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

Question

我想在我的 input 字段中创建动态 placeholder。我有一个 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 菜单到 select 过滤器：

<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 字段带有 'no-dynamic' 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 中创建一个动态占位符

Make a dynamic placeholder in Reactjs using hooks

javascript

input

placeholder

reactjs