如何將工具提示添加到反應列表中的項目

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/ 下編碼

工具提示.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>
    )
  }
}

** 你好.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')
);