Question

我在li列表中悬停按钮时遇到问题。悬停后，每个li项目中显示一个li项目按钮。链接到代码段下方的codepen。

const ItemView = (props) => {
return <li 
onMouseOver={() => props.onMouseOver()}
onMouseMove={() => props.onMouseOver()}
onMouseLeave={() => props.onMouseLeave()}
>
    <div className="item__row">
        <h5>{props.name}</h5>
        <h6>Age: {props.age}</h6>
        <p>{props.strenght}/100</p>


    {props.isHover ? props.children[0] : null}


    </div>
    {props.children[1]}
</li>

}

Codepen：https://codepen.io/dominik3246/pen/QqKzzp

Answer 1

您需要使用一个元素数组来跟踪哪个特定元素被悬停。因此，将isHover状态变量作为类似

的数组

constructor(){
  ...
  this.state ={
  ...
  isHover: [false, false, false, false, false],
  ...
  }
}

然后让你的mouseOver函数返回一个包含该项目索引范围的函数，如下所示

mouseOver(i) {
    return () => {
      if (this.state.isHover[i] === true) {
        return this.state;
      }
      let isHover = [...this.state.isHover]
      isHover[i] = true;
      this.setState({ ...this.state, isHover });
    }
  }

然后将isHover和mouseOver道具传递给您的ItemView

{this.state.data.map((d, i) => {
          return (
            <ItemView
              key={d.id}
              name={d.name}
              strenght={d.strenght}
              age={d.age}
              onMouseOver={this.mouseOver(i)}
              onMouseLeave={this.mouseExit}
              isHover={this.state.isHover[i]}
            >
            ...

以下是您的代码的工作示例：Link of example

React，onMouseOver事件触发列表中的所有项而不是一个

1 个答案: