javascript - 在ReactJS中使用相同的功能打开两个下拉菜单(Open two dropdowns with the same function in ReactJS)

Question

I have two dropdown menus, one to choose the columns of my Table and another one to choose a filter for this column .

(我有两个dropdown菜单，一个用于选择Table的columns ，另一个用于选择此column的filter 。)

Actually I have two functions to open both of dropdowns (one function per dropdown ) and I would like to have just one function for both of them.

(实际上，我有两个打开两个dropdowns功能（每个dropdown一个功能），并且我想为它们两个都只有一个功能。)

It maybe simple, but I don't know how to do it.. if someone had the solution, it would be great.

(这也许很简单，但是我不知道该怎么做..如果有人有解决方案，那就太好了。)

My state:

(我的状态：)

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

The two functions for the two dropdowns :

(两个dropdowns的两个功能：)

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

And the two buttons for open the two dropdowns :

(和两个用于打开两个dropdowns buttons ：)

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

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

  ask by Бастьен translate from so

Answer 1

Method 1: Pass in your name as second argument to your function handler(方法1：将您的名字作为第二个参数传递给函数处理程序)

You can write your onClick props as the following,

(您可以按以下方式编写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>

Then in your handler

(然后在您的处理程序中)

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

Method 2: Function that returns a function handler(方法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>

In your handler, you call a function with name and returns a handler for that property.

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

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