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

Posted 2023-03-05

【中文标题】使用钩子在 Reactjs 中创建一个动态占位符

【英文标题】：Make a dynamic placeholder in Reactjs using hooks

【发布时间】：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

【参考方案1】：

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

声明：

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

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

在输入中：

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