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

【问题标题】：Make a dynamic placeholder in Reactjs using hooks使用钩子在 Reactjs 中创建一个动态占位符
【发布时间】：2020-03-24 07:44:53
【问题描述】：

我想在我的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 菜单选择过滤器：

<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 之外，所以我不再知道了.. 欢迎您的帮助。

【问题讨论】：

stackblitz.com/fork/react 你能在那里建立你的项目吗，所以我可以看到 useState 和其他一切
你可以添加stackblitz

标签： javascript reactjs input placeholder

【解决方案1】：

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

声明：

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

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

在输入中：

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

【讨论】：