Javascript 将MaterialUI HtmlTooltip嵌套在Material UI选择菜单项内/选择onChange处理程序中的合成事件（？）问题

——目标---

我正在尝试使用包装在HtmlTooltips中的菜单项进行材质UI选择，该菜单项显示关于每个列表选项的悬停信息

作为一个PoC，我现在有意地保持它的简单性，稍后将动态地映射它

---当前代码---

我正在使用控制器/视图模式，并且在视图中具有以下材质UI选择组件：

<FormControl
  variant="outlined"
>
  <InputLabel id="owner">Owner</InputLabel>

  <Select
    labelId="owner"
    id="owner"
    defaultValue="0"
    value={props.owner}
    onChange={props.handleOwnerChange}
  >
    <MenuItem id="none" value="none" disabled>
      (Select a Value)
    </MenuItem>

    <MenuItem id="231-abc" value="231-abc" disabled>
      Charlie Person
    </MenuItem>

    <HtmlTooltip
      title={
        <>
          <Typography color="inherit">
            Steve Human
          </Typography>
          <b>{"Next PTO:"}</b>{" "}
          <i style={{ color: "red" }}>
            {" 12/25/20-01/01/20"}
          </i>
        </>
      }
    >
      <MenuItem id="123-abc" value="123-abc">
        Steve Human
      </MenuItem>
    </HtmlTooltip>
    
  </Select>
</FormControl>

 <FormControl
   variant="outlined"
 >
  <InputLabel id="owner">Owner</InputLabel>

   <Select
     labelId="owner"
     id="owner"
     defaultValue="none"
     value={props.owner}
     onChange={props.handleOwnerChange}
   >
     <MenuItem id="none" value="none" disabled>
       (Select a Value)
     </MenuItem>

     <MenuItem id="231-abc" value="231-abc" disabled>
       Charlie Person
     </MenuItem>

     <MenuItem id="123-abc" value="123-abc">
       <HtmlTooltip
         title={
           <>
             <Typography color="inherit">
               Steve Human
             </Typography>
             <b>{"Next PTO:"}</b>{" "}
             <i style={{ color: "red" }}>
             {" 12/25/20-01/01/20"}
             </i>
           </>
         }
      >
        <div>Steve Human</div>
      </HtmlTooltip>
   </MenuItem>

   </Select>
</FormControl>

…在控制器中，select用于在选择列表项时更改状态值的函数：

 const handleOwnerChange = (event) => {
      setOwner(event.target.value); //
 };

  const handleOwnerChange = (event) => {
       setOwner(event.currentTarget.id);
  };

---

由于某些原因，在这种情况下未定义event.target.value。

因为使用setOwner（event.target.value）时它是异步的，所以需要将事件目标值保存到变量中，而不是直接在setOwner中使用它。 有关更多详细信息，请参阅

事件池

该事件是合并的。这意味着该事件 对象将被重用，并且在 已调用事件回调。这是出于性能原因。作为 这样，您就不能以异步方式访问事件

---

在尝试了埃里克的建议后，我发现了问题所在。以下是我最终需要做的事情：

基本上，我只需要：

• 与组件包装的顺序相反-使用菜单项包装HtmlTooltip，而不是使用HtmlTooltip包装菜单项
• 将列表项文本括在div中

---工作代码---

我正在使用控制器/视图模式，并且在视图中具有以下材质UI选择组件：

<FormControl
  variant="outlined"
>
  <InputLabel id="owner">Owner</InputLabel>

  <Select
    labelId="owner"
    id="owner"
    defaultValue="0"
    value={props.owner}
    onChange={props.handleOwnerChange}
  >
    <MenuItem id="none" value="none" disabled>
      (Select a Value)
    </MenuItem>

    <MenuItem id="231-abc" value="231-abc" disabled>
      Charlie Person
    </MenuItem>

    <HtmlTooltip
      title={
        <>
          <Typography color="inherit">
            Steve Human
          </Typography>
          <b>{"Next PTO:"}</b>{" "}
          <i style={{ color: "red" }}>
            {" 12/25/20-01/01/20"}
          </i>
        </>
      }
    >
      <MenuItem id="123-abc" value="123-abc">
        Steve Human
      </MenuItem>
    </HtmlTooltip>
    
  </Select>
</FormControl>

 <FormControl
   variant="outlined"
 >
  <InputLabel id="owner">Owner</InputLabel>

   <Select
     labelId="owner"
     id="owner"
     defaultValue="none"
     value={props.owner}
     onChange={props.handleOwnerChange}
   >
     <MenuItem id="none" value="none" disabled>
       (Select a Value)
     </MenuItem>

     <MenuItem id="231-abc" value="231-abc" disabled>
       Charlie Person
     </MenuItem>

     <MenuItem id="123-abc" value="123-abc">
       <HtmlTooltip
         title={
           <>
             <Typography color="inherit">
               Steve Human
             </Typography>
             <b>{"Next PTO:"}</b>{" "}
             <i style={{ color: "red" }}>
             {" 12/25/20-01/01/20"}
             </i>
           </>
         }
      >
        <div>Steve Human</div>
      </HtmlTooltip>
   </MenuItem>

   </Select>
</FormControl>

…在控制器中，select用于在选择列表项时更改状态值的函数：

 const handleOwnerChange = (event) => {
      setOwner(event.target.value); //
 };

  const handleOwnerChange = (event) => {
       setOwner(event.currentTarget.id);
  };

---

非常感谢。我读了一些关于它的文章，尝试了示例代码，并试图使其适应我的需要。示例代码在尝试使用它时起作用，但当我将event.target.value子代为变量而不是event.type时，如果您有其他想法，则所有内容最终仍然为null。将尝试添加到主线程以供参考。再次感谢！