在材料 UI 中嵌套 MaterialUI HtmlTooltip Select MenuItem / Synthetic event(?) 在选择 onChange 处理程序中的问题答案

【问题标题】：Nesting MaterialUI HtmlTooltip inside of Material UI Select MenuItem / Synthetic event(?) problem in select onChange handler在材料 UI 中嵌套 MaterialUI HtmlTooltip Select MenuItem / Synthetic event(?) 在选择 onChange 处理程序中的问题
【发布时间】：2020-10-27 22:33:39
【问题描述】：

---目标---

我正在尝试使用包含在 HtmlTooltips 中的 MenuItems 来选择 Material 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>

...在控制器中，我的状态 getter/setter...

   const [owner, setOwner] = useState("null");

...也是在控制器中，选择用来在选择列表项时更改状态值的函数：

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

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

【问题讨论】：

标签： javascript reactjs drop-down-menu material-ui react-hooks

【解决方案1】：

因为使用setOwner(event.target.value)时是异步的，所以需要将事件目标值保存到一个变量中，而不是直接在setOwner中使用。更多详情请参考here。

事件池

SyntheticEvent 是池化的。这意味着 SyntheticEvent 对象将被重用，并且所有属性都将在事件回调已被调用。这是出于性能原因。作为因此，您不能以异步方式访问事件。

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  var eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  this.setState({clickEvent: event}); // Won't work. this.state.clickEvent will only contain null values.
  this.setState({eventType: event.type}); // You can still export event properties.
}

【讨论】：

谢谢。我阅读了一些关于它的内容，尝试了示例代码并尝试使其适应我的需要。示例代码在尝试使用它时有效，但是当我将 event.target.value 替换为变量而不是 event.type 时，如果您有任何其他想法，一切最终仍然为空。将尝试添加到主线程以供参考。再次感谢！

【解决方案2】：

在尝试了 Eric 的建议后，我发现了问题所在。这是我最终需要做的：

基本上，我只需要：

颠倒组件包装的顺序 - 用 MenuItem 包装 HtmlTooltip，而不是用 HtmlTooltip 包装 MenuItem。
将列表项文本括在 div 中

---工作代码---

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

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

...在控制器中，我的状态 getter/setter...

  const [owner, setOwner] = useState("none");

...以及在控制器中，当一个列表项被选中时，选择用来改变状态值的函数：

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

【讨论】：