如何在 react-redux 中使用 Tooltip答案

【问题标题】：How to use Tooltip in react-redux如何在 react-redux 中使用 Tooltip
【发布时间】：2019-05-05 16:20:59
【问题描述】：

我是新来的反应。我想在标签上有一个工具提示

以下满足我的要求

  <div class="sds_sp_2xl sds-cb_font--primary">
    To see Tooltip positioned on the right,
    <a role="button" tabindex="0" aria-describedby="tooltip-cb-02" class="sds-cb_tooltip">
      hover over me.
      <div role="tooltip" class="sds-cb_tooltip__content sds-cb_tooltip__content--right" id="tooltip-cb-02">Contextual helper text</div>
    </a>
  </div>

当我们将鼠标悬停在与复选框相关的标签上时，我希望有工具提示

表格


             <Field
               name='checkMe'
               label='check'
               component={Checkbox}
               checked={checkMe}
              {...this.checkboxActions}
            />

复选框

export const Checkbox = (inputProps) => {
  const { input, label, checked } = inputProps
  const { name } = input

  const className = 'sds-cb_checkbox-a__input'


  return (
    <label className='sds-cb_checkbox-a' >
      <input {...input} className={className} checked={checked} type='checkbox' />
      <div className='sds-cb_checkbox-a__box' id={name} />
      <span className='sds-cb_checkbox-a__label sds_font-size--14'>{label}</span>
    </label>
  )
}

我如何嵌入它来工作。那么它对这些领域也有用吗？提前致谢！

【问题讨论】：

标签： reactjs react-redux redux-form

【解决方案1】：

React-tooltip 的引用 这一定会对你有所帮助。

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

        this.state = {
          displayTooltip: false
        }
      }

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

    class App extends React.Component {
      render() {
        return (
          <div className='container'>
            <p>Here is a <Tooltip message={'Hello, I am a super cool 
             tooltip'} position={'top'}>tooltip</Tooltip> on top.</p>
          </div>
        )
      }
    }
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )

【讨论】：

【解决方案2】：

首先，您不应将标签包裹在输入元素周围，而是将for 属性设置为输入的正确ID。因此，当单击标签时，输入会聚焦。要显示工具提示或启动任何其他操作，请使用标准 javascript 事件 onMouseEnter 和 onMouseLeave，根据此设置一些状态并将此状态用作工具提示元素的条件渲染：

<label for="someId" onMouseEnter={()=>this.setState({showTooltip:true})} onMouseLeave={()=>this.setState({showTooltip:false})}>Labeltext</label>
<input id="someId" .../>
{this.state.showTooltip && <div>Tooltip</div>}

当您设置和使用一些 redux 状态时，这也将起作用。

【讨论】：