Onclick 选择的 MenuItem 无法正常工作

Question

我有以下奇怪的行为

<Select style={{ width: "60%" }} value="none">
  <MenuItem onClick={e => this.handleSelectChange(e, null, "None")}>
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
        <div key={index}>
          <MenuItem
            onClick={e => this.handleSelectChange(e, index, Obj.Module)}
            value={Obj.Module}
          >
            {Obj.Module}
          </MenuItem>
        </div>
      );
    }
  })}
</Select>

 {this.state.selectedSubModules === true ? <React.Fragment>

   <InputLabel style={{ marginLeft: '15%', marginTop: '5%' }} htmlFor="age-simple">SubModule Name</InputLabel>
           <Select
            style={{ width: '60%' }}
           value="none" onChange={this.handleSelectChange}
            >
              <MenuItem
                 value="None"
              >
               <em>None</em>
              </MenuItem>

      {
        values.Modules_SubModules_Array.map((Obj, index) => {
                return (
                          <div key={index}>
              {Obj.SubModules.map((submodule, index2) => {
                             return (
                                      <MenuItem
                                            key={index2}
                                            value={submodule}
                                       >
                                            {submodule}
                                       </MenuItem>
                                               )
                                          })
                                        }
                            </React.Fragment>
                                    )
                                    })
                                }
                            </Select>
                        </div>
                            : null
                        }

这是我的功能：

handleSelectChange = (event, index, value) => {
  console.log(value);
  this.setState(
    {
      result: event.target.value,
      visible: true,
      selectedIndex: index
    },
    function() {
      index;
    }
  );
};

地图循环内的 Onclick 工作正常，但地图循环外的 MenuItem 上的 Onclick 没有触发 不知道该怎么做 我试图做一些控制台日志，当我按下选择下拉菜单时它似乎触发当我选择一个项目时菜单不知道为什么这种奇怪的行为地图循环内的 MenuItems 工作正常当我只从下拉列表中选择一个项目时 onClick 触发

Answer 1

您必须像这样将 onChange 移动到 Select 组件：

<Select style={{ width: "60%" }} value="none" onChange={this.handleSelectChange}>
  <MenuItem>
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
          // Remove the div wrapper
          <MenuItem
            key={index}
            value={Obj.Module}
          >
            {Obj.Module}
          </MenuItem>
      );
    }
  })}
</Select>

并像这样访问值：

handleSelectChange = (event) => {
  this.setState({
      result: event.target.value,
      visible: true
    }
  );
};

要访问索引，您可以使用 onChange 的第二个参数访问键，如下所示：

handleSelectChange = (event, child) => {
  this.setState({
      result: event.target.value,
      visible: true,
      index: Number(child.key)
    }
  );
};

对于双映射，您需要使用 reduce 来移除包装，如下所示：

values.Modules_SubModules_Array.reduce((arr, obj, i) => {
    obj.SubModules.forEach((sub, k) => {
        arr.push(<MenuItem
            key={i * 100 + k}
            value={sub}>
            {sub}
        </MenuItem>);
    });
    return arr
}, [])

希望这会有所帮助。编码愉快。

Answer 2

通常，您为每个MenuItem 定义值并在Select 组件上使用onSelect 回调：

<Select onSelect={this.handleSelectChange}>
  <MenuItem value="none">
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
        <MenuItem key={index} value={Obj.Module}>
          {Obj.Module}
        </MenuItem>
      );
    }
  })}
</Select>

请注意，您的问题缺少必要的信息：

• MenuItem, Select 实现，是库组件吗？哪个图书馆？

所以根据您的代码，您可以尝试将value 添加到MenuItem "none"：

const DEFAULT_VALUE = 'none';

<Select value={DEFAULT_VALUE}>
  <MenuItem onClick={e => this.handleSelectChange(e, null, DEFAULT_VALUE)} value={DEFAULT_VALUE}>
    <em>None</em>
  </MenuItem>
</Select>