在 ReactJS 中打开两个具有相同函数的下拉列表

Question

我有两个dropdown菜单，一个用于选择我Tablecolumns，另一个用于选择此column的filter。 实际上，我有两个函数来打开两个dropdowns(每个dropdown一个函数(，我希望它们只有一个函数。 这可能很简单，但我不知道该怎么做。如果有人有解决方案，那就太好了。

我的状态：

const [anchorEl, setAnchorEl] = React.useState({
column: null,
filter: null
});

这两个dropdowns的两个函数：

const handleClickDropdownColumn = (event) => {
setAnchorEl({
column: event.currentTarget,
});
};
const handleClickDropdownFilter = (event) => {
setAnchorEl({
filter: event.currentTarget,
});
};

两个buttons打开两个dropdowns：

<Button
variant="contained"
size="small"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClickDropdownColumn}
endIcon={<ArrowDropDownIcon/>}
>
{currentColumn}
</Button>

<IconButton onClick={handleClickDropdownFilter}>
{currentFilter}
</IconButton>

Answer 1

方法 1：将您的名称作为第二个参数传递给函数处理程序

你可以把你的onClick道具写成如下：

<Button
variant="contained"
size="small"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={e => handleClickDropdown(e, 'column')}
endIcon={<ArrowDropDownIcon/>}
>
{currentColumn}
</Button>
<IconButton onClick={e => handleClickDropdown(e, 'filter')}>
{currentFilter}
</IconButton>

然后在您的处理程序中

const handleClickDropdown = (event, name) => {
setAnchorEl({
[name]: event.currentTarget,
});
};

方法 2：返回函数处理程序的函数

<Button
variant="contained"
size="small"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClickDropdown('column')}
endIcon={<ArrowDropDownIcon/>}
>
{currentColumn}
</Button>
<IconButton onClick={handleClickDropdown('filter')}>
{currentFilter}
</IconButton>

在处理程序中，使用name调用函数并返回该属性的处理程序。

const handleClickDropdown = (name) => (event) => {
setAnchorEl({
[name]: event.currentTarget,
});
};

Answer 2

您可以将处理程序函数设置为 this 并将其用于两个按钮。

const handleClickDropdown = (event, type) => {
if(type in anchorEl){
setAnchorEl({
...anchorEl,
[type]: event.currentTarget,
})
}
}