陣營MouseEnter事件不工作的時候就映射兒童

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