Question

我正在使用Range函数包装的createSliderWithTooltip组件。我的问题是，当手柄关闭时（小范围），工具提示会相互重叠。我试图做的是在工具提示彼此足够接近时更改它们的位置，我正在尝试使用align中的tipProps来实现。

当我这样做时，两个工具提示都发生了变化，并且它们仍然重叠，因此我想使它们彼此相反。是否可以单独更改每个工具提示的align？

谢谢您的关注！

万一你们需要看代码，基本上就是这样：

import React from 'react';
import { createSliderWithTooltip, Range as RcRange, RangeProps } from 'rc-slider';
import 'rc-slider/assets/index.css';
import { rangeStyle, tipStyle } from './style';
import TimeFormatter from './TimeFormatter';

export const RangeWithToolTip = createSliderWithTooltip(RcRange);

interface IState {
  initialTime: number;
  finalTime: number;
}

interface IProps extends RangeProps {
  initialTime: number;
  finalTime: number;
  minInterval: number;
}

export class Range extends React.Component<IProps, IState> {
  private readonly initialTimeAbsolute: number;
  private readonly finalTimeAbsolute: number;

  constructor(props: IProps) {
    super(props);

    this.initialTimeAbsolute = this.props.initialTime * 60;
    this.finalTimeAbsolute = this.props.finalTime * 60;

    this.state = {
      initialTime: this.props.initialTime * 60,
      finalTime: this.props.finalTime * 60
    };

  }

  private handleChange = (value: number[]) => {
    this.setState({
      initialTime: value[0],
      finalTime: value[1]
    });
  };

  public render() {
    return <RangeWithToolTip
      className={rangeStyle}
      value={[this.state.initialTime, this.state.finalTime]}
      step={5}
      onChange={this.handleChange}
      min={this.initialTimeAbsolute}
      max={this.finalTimeAbsolute}
      tipProps={{ visible: true, overlayClassName: tipStyle, placement: 'bottom' }}
      tipFormatter={TimeFormatter.format}
      allowCross={false}
      pushable={this.props.minInterval}
    />;
  }

}

分别更改工具提示位置

0 个答案: