javascript - React 中的 onMouseover 和 onMouseOut 事件句柄

Question

我是 React-Js 的初学者，我在 mouserover 和 onmouseout 上设置了一些事件处理。

let showUpdateRow = () => {}

let hideUpdateRow = () => {}

let bodyContent = props.linkData.map((data, index) => {
  return (
    <tr key={index} onMouseOver={showUpdateRow} onMouseOut={hideUpdateRow}>
      <td>{data.comments}</td>
      <td>
        {data.link}
        <div className="updateRow" style={{ display: 'none' }}>
          <MdEdit className="editRow" />
          <MdDelete className="deleteRow" />
        </div>
      </td>
    </tr>
  )
})

onMouseOver 事件，我想显示 updateRow Div 和 OnMouseOut 事件，我想隐藏 updateRow Div。

我只需要显示当前鼠标悬停在 tr 内的 updateRow div。如果我使用 ref 属性但在鼠标悬停时将显示所有 updateRowDiv。

我需要一些帮助，谢谢。

Answer 1

如果我没理解错的话。您可以为 showUpdateRow 声明一个状态并使用它来显示/隐藏您的行。

所以它看起来像

state = {
  showUpdateRow: false,
};

showHideUpdateRow =  (value) => {
  this.setState({showUpdateRow : value})
}

在bodycontent中你可以使用

onMouseOver={showHideUpdateRow(true)} onMouseOut={showHideUpdateRow(false)}

然后在 updateRow 样式中

style={{ display: `${this.state.showUpdateRow ? 'block' : 'none'}` }}