Question

我需要使用react-tooltip库显示react-select容器的工具提示（而不是单独的选项）。

我根据原始组件创建了自己的SelectContainer组件，并在其中添加了data-tip和data-for HTML属性。工具提示出现，但是当我更改所选值时，它消失了，不再显示。

这是我的代码：

const getSelectContainer = options => props => {
  return (
    <components.SelectContainer
      {...props}
      innerProps={{
        ...props.innerProps, ...{
          'data-tip': options.tooltipText,
          'data-for': options.tooltipId,
        }
      }}
    />
  )
}

const CustomSelect = (props) => {
  const tooltipId='tooltip_id'
  const tooltipText='tooltip'
  const selectedOption = colourOptions.filter(option => option.value === props.value)

  return (
    <div>
      <ReactTooltip effect="solid" html={true} place="bottom" id={tooltipId} />
      <Select
        defaultValue={colourOptions[4]}
        value={selectedOption}
        options={colourOptions}
        classNamePrefix="react-select"
        onChange={item => props.onChange(item.value)}
        className="my-select"
        components={{
          SelectContainer: getSelectContainer({
            tooltipText:tooltipText,
            tooltipId:tooltipId
          })
        }}
      />
    </div>
  )
}

class Page extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selectValue: 'red'
    }
  }
  render () {
    const onChange = (value)=> {
      this.setState({selectValue: value})
      //alert(value)
    }
    return (
      <CustomSelect
        value={this.state.selectValue}
        onChange={onChange}>
      </CustomSelect>
    )
  }
}

查看完整的example here：

如果我用另一个Select包装<div>并为其分配工具提示HTML属性，则一切正常，但是我不想为此添加一个移动DOM元素。

更改选择后如何显示工具提示？

Answer 1

尝试在状态更改时重新构建react-tooltip。

 public  LiveData<PagedList<Comment>> commentPagedList;
public  LiveData<CommentDataSource> liveDataSource;
public  LiveData progressBar;

public CommentViewModel(){
    CommentDataFactory commentDataFactory = new CommentDataFactory();
    liveDataSource = commentDataFactory.commentLiveDataSource;

    progressBar = Transformations.switchMap(liveDataSource, CommentDataSource::getProgressBar);

    PagedList.Config config = new PagedList.Config.Builder()
            .setEnablePlaceholders(false)
            .setPageSize(CommentDataSource.PAGE_SIZE)
            .build();

    commentPagedList = new LivePagedListBuilder<>(commentDataFactory, config).build();
}


public LiveData<PagedList<Comment>> getCommentData(){
    return commentPagedList;
 }
}

如何显示反应选择的工具提示？

1 个答案: