如何在React列表中的项目上添加工具提示

Question

{this.state.filteredData.map((row,index) => ( 
       <div key={row.id}onMouseOver={this.handleover.bind(this,index)} onMouseOut={this.handleout.bind(this)}/*onClick={()=>this.onselect(this.state.keyword + row.keywordValue)}*/>  
             <ul key={row.id}>
                  <li key={row.id}>{row.keywordValue}</li>
                  <div key={index} style={tooltipStyle}>tooltip</div>
              </ul>
        </div>
))}

// [...]

  handleover(index) {
        this.setState({ hover: true})
  }

  handleout() {
    this.setState({ hover: false })
  }

当我将鼠标悬停在列表中的一个项目上时，它会显示所有项目的工具提示，但是我只想为选中的项目显示工具提示，如下所示：

Answer 1

我为您编写了一个示例，它对我有用。我创建了一个工具提示组件，如果您愿意，可以使用它。在下面的链接中编码 https://jsfiddle.net/zwemLjc3/1/

Tooltip.js

class Tooltip extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      displayTooltip: false
    }
    this.hideTooltip = this.hideTooltip.bind(this)
    this.showTooltip = this.showTooltip.bind(this)
  }

  hideTooltip () {
    this.setState({displayTooltip: false})

  }
  showTooltip () {
    this.setState({displayTooltip: true})
  }

  render() {
    let message = this.props.message
    let position = this.props.position
    return (
      <span className='tooltip'
          onMouseLeave={this.hideTooltip}
        >
        {this.state.displayTooltip &&
        <div className={`tooltip-bubble tooltip-${position}`}>
          <div className='tooltip-message'>{message}</div>
        </div>
        }
        <span 
          className='tooltip-trigger'
          onMouseOver={this.showTooltip}
          >
          {this.props.children}
        </span>
      </span>
    )
  }
}

** Hello.js **

class Hello extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    };
  }

 render() {
    const data =[{"name":"test1","tooltip":"AAAAAAAAA"},{"name":"test2","tooltip":"BBBBBB"}];
    return (
      <div className='container'>

      {data.map(function(d, idx){
      return (
     <p key={idx} >{d.name} <Tooltip message={d.tooltip} position={'right'}>{d.tooltip}</Tooltip></p>
      )
       })}
      </div>


    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);