ReactJS：如何动态渲染Material-UI的<MenuItem/>在<DropDownMenu/>中？

Question

使用ReactJS + Material-UI，我有一个名为colors的数组，其中包含不同颜色的字符串。例如，数组colors具有3个颜色字符串："white"，"blue"，"green"。然后，我想要在<DropDownMenu/> (http://www.material-ui.com/#/components/dropdown-menu)内呈现每个颜色字符串作为<MenuItem/>。当选择一个<MenuItem/>时，我想控制台记录该特定颜色，例如选择“white”：console.log("white")。

因此，我使用了.forEach但是<DropDownMenu/>没有显示任何字符串并且为空。我可能做错了什么？

这是代码：

  constructor() {
    super()

    this.state = {
      value: 1,
    }
  }

  dropDownColorChange(event, index, value) {
    this.setState({value: value})
    //Not sure how to implement here dynamically based on array size. Would like to console.log the color string of the selected
  }

  render() {
    var colors = ["white", "blue", "green"] //would be able to handle any array size


    return (
             <div>
               <DropDownMenu
                value={this.state.valueTwo}
                onChange={this.dropDownColorChange}
              >
                {
                    <MenuItem value={1} primaryText="Select" />
                  colors.forEach(color => {
                    <MenuItem primaryText={color}/>
                  })
                }
              </DropDownMenu>
             </div>
    )
  }

谢谢你

- user6898719

Answer 1

你几乎做对了。你需要在可用颜色上进行 map，并为每种颜色返回一个 MenuItem：

const colors = ['white', 'blue', 'green'];

class ColorChanger extends Component {
  constructor() {
    super();

    this.state = {
      selectedColorValue: 1,
    };
  }

  handleColorChange(event, index, value) {
    console.log(`You have selected ${colors[value]} color`);

    this.setState({
      selectedColorValue: value
    });
  }

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.selectedColorValue} onChange={this.handleColorChange}>
          {colors.map((color, index) =>
            <MenuItem key={index} value={index} primaryText={color} />
          )}
        </DropDownMenu>
      </div>
    );
  }
}

map（与 forEach 相反）返回一个数组，其中每个元素都是谓词函数的返回值。在您的情况下，它会返回一个<MenuItem />。

- Konstantin Grushetsky

---

你需要为每个 MenuItem 添加 key 属性，这样 React 才能跟踪它们。 - Kafo

没错，漏掉了这个。答案已经更新了。 - Konstantin Grushetsky

我正在做同样的事情，但是在动态创建的菜单项上，onchange事件不起作用，有什么原因吗？ - Vivek Singh

Answer 2

我使用了React Hook来设置当我点击菜单图标时的菜单项，并且我还设置了要传递给我的Action方法的值。

const [menuItems, setMenuItems] = React.useState<IMenuItem[]>();
const [menuValue, setMenuValue] = React.useState<IMenuValue>();

const handleClickMenu = (
    event: React.MouseEvent<HTMLElement>,
    value: IMenuValue,
  ) => {
    setMenuItems(value.menuItems);
    setMenuTransaction(value);

    setMenuAnchorEl(event.currentTarget);
  };


return (

// ... code ...
<PositionedVertMenu
 data-testid={`menu`}
 open={Boolean(menuAnchorEl)}
 anchorEl={menuAnchorEl}
 onClick={(event: React.MouseEvent<HTMLElement>) => handleClickMenu(event, value)}
 onClose={handleCloseMenu}
>
  {menuValue &&
   menuItems?.map((option, menuIndex) => (
    <MenuItem
     data-testid={`menu-item-${menuIndex}`}
     onClick={() => option.action(menuValue, handleCloseMenu)}
    >
     <Typography>{translate(option.text)}</Typography>
    </MenuItem>
   ))}
 </PositionedVertMenu>
)

- jen