Question

我只是希望这些子元素在鼠标悬停时显示删除按钮...

控制台登录handleMouseEnter显示在渲染时，所有子项都会触发mouseEnter事件。它似乎停留在一个循环中。调试几乎是不可能的。

只有当onMouseEnter和onMouseLeave留在代码中时才会出现问题。

render(){

    const handleMouseEnter = (tool) => this.setState({display : tool});
    const handleMouseLeave = () => this.setState({display : "none"});

return (
 <div>

    <div className="search-result-background">
      <div className="search-result-row row">
        <div className="col-md-4">
        </div>
        <div className="col-md-4">
        <form>
      <TextFieldGroup className="find-tool-search-bar"
        onChange= {this.checkToolExists}
        value = {this.state.toolname}
        field = 'toolname'
        label = ''
        error = {this.state.errors}
        placeholder = "FIND IN FAVORITES"
      />
    </form>
       </div>

<div className="col-md-4">
        <ButtonToolbar>
          <DropdownButton noCaret onSelect={this.sort} bsSize="large" title="Sort by" id="dropdown-size-large">
            <MenuItem eventKey="1">Name</MenuItem>
            <MenuItem eventKey="2">Uploaded Date</MenuItem>
          </DropdownButton>
        </ButtonToolbar>
        </div>
        <h1 className="search-error">{this.state.errors}</h1>
        <div className="col-md-12" >
          {this.state.filteredTools.map((tool,i)=>
            <div key ={i} className={"child " + tool.toolname } onMouseEnter={handleMouseEnter(tool.toolname)}
            onMouseLeave={handleMouseLeave}> {this.state.display == tool.toolname ?
               <button >remove?</button> : null}
              <Link to={`/tools/${tool.id.substring(4)}`}>

              <Thumbnail 
                         className="thumb" src={logoImagePurple} alt="242x200">
                <h3>{tool.toolname}</h3>
              </Thumbnail>
              </Link>
            </div> 
          )}
        </div>
      </div> 
    </div>
  </div>          
)
  }
}

Answer 1

问题在于这一行：

onMouseEnter={handleMouseEnter(tool.toolname)}

您应将其更改为：

onMouseEnter={() => handleMouseEnter(tool.toolname)}

在映射的子项上，React mouseEnter事件不起作用

1 个答案: