Question

我是React-Js的初学者，我在onmouserover和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'}` }}

React中的onMouseover和onMouseOut事件句柄

1 个答案: