材质 UI CardHeader 动作下拉答案

【问题标题】：material UI CardHeader action drop-down材质 UI CardHeader 动作下拉
【发布时间】：2019-06-30 15:05:58
【问题描述】：

我正在尝试将 FormControl、Select 组件和 MenuItem 添加到 CardHeader IconButton 的操作属性中。

目前代码如下：

渲染：

<CardHeader
  action={
    <IconButton
      onClick={this.renderFilterRequest()}
    >
      <Edit />
    </IconButton>
    }
/>

onClick 方法：

renderFilterRequest() {
  const { selection } = this.state;
  return (
    <div>
      <FormControl>
        <Select
          value={selection}
          onChange={this.handleFilterChange}
        >
          <MenuItem value='1'>January</MenuItem>
          <MenuItem value='2'>February</MenuItem>

        </Select>
      </FormControl>
    </div>
  );
}

我得到的错误是 onClick 监听器是一个函数，而不是 object 类型的值。在 CardHeader 操作单击上呈现下拉菜单的正确方法是什么？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你从this.renderFilterRequest返回了一些div，你也在调用函数，所以onClick的值变成了div。但它们本来就是函数，对吧？

所以应该是：onClick={this.renderFilterRequest}。
该函数还返回了一个 div，但无法将其附加到 render 中的渲染逻辑。

您需要将 MenuItems 放入您的渲染方法并根据状态显示/隐藏它们。

您的 onClick 侦听器应该是一个更改状态的函数，以便 MenuItems 变得可见。

下面是一个简单的演示：

【讨论】：