I would like to make a dynamic placeholder in my input field.(我想在我的input字段中创建一个动态placeholder 。)
I have an array of filters like this:(我有一个这样的过滤器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 />
}
];
The state for the current filter (using hooks):(当前过滤器的状态（使用钩子）：)
const [currentFilter, setCurrentFilter] = React.useState(<FilterListIcon/>);
The dropdown menu to select a filter :(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>
And the input field whith a 'no-dynamic' placeholder :(input字段带有“非动态” placeholder ：)
<Input
placeholder="Filtre.."
inputProps={{
"aria-label": "description"
}}
/>
I would like to change the placeholder according to the filter that has been chosen.(我想根据选择的过滤器更改占位符。) I wanted to do a function that manages this but I don't know how to do it.(我想做一个功能来管理这个，但是我不知道该怎么做。) When I was in the input field, I'm out of the .map , so so I don't know anymore.. Your help is welcome.(当我在input字段中时，我不在.map ，所以我不再知道了。欢迎您的帮助。)
ask by Бастьен translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
