在 Material UI 中嵌套 MaterialUI HtmlTooltip Select MenuItem / Synthetic event(?) 問題在 select onChange 處理程序中

Question

- -目標 - -

我正在嘗試使用包裝在 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 未定義。

Answer 1

因為在使用 setOwner(event.target.value) 時是異步的，所以需要將事件目標值保存到一個變量中，而不是直接在 setOwner 中使用。 有關更多詳細信息，請參閱此處。

事件池

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

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