实质性UI CardHeader操作下拉菜单

Question

我试图在CardHeader IconButton的操作道具中添加一个FormControl，一个Select组件和一个MenuItem。

当前代码如下：

渲染：

SELECT productName, productVendor
FROM Products
WHERE productScales = '1:700' AND productLine = 'Ships';

onClick方法：

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

我得到的错误是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类型的值。在CardHeader操作单击上呈现下拉菜单的正确方法是什么？

Answer 1

您要从this.renderFilterRequest返回某个div，并且还要调用该函数，因此onClick的值将成为div。但是它们本来就是功能，对吧？

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

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

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

这是一个简单的演示，该如何进行：