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;
    }
  );
};

Map循环内的Onclick正常工作，但map循环外的MenuItem上的那一次不触发，不知道该怎么办我尝试执行一些控制台日志，当我按选择下拉菜单时似乎触发了当我选择一个项目时菜单不起作用，不知道为什么这种奇怪的行为，当我仅从下拉列表中选择一个项目时，map循环内的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定义值，并在onSelect组件上使用Select回调：

<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：

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>

Onclick在选择的MenuItem上无法正常工作

2 个答案: