添加货币道具后，滑块旋钮停止工作

问题描述

我有一个RangeSlider.tsx：

import * as React from 'react'
import { Label } from './Label'

interface IProps {
  currency?: any
  value?: any
  label: any
  step?: any
  start?: any
  min?: any
  name: string
  max?: any
  onChange?: any
}

interface IState {
  value?: any
  sliderBarValue?: any
}

export class RangeSlider extends React.Component<IProps,IState> {
  constructor(props) {
    super(props)
    this.changeCallback = this.changeCallback.bind(this)
    this.state = {
      value: props.value.indexOf(props.start),}
    // @ts-ignore
    this.handleChange = props.onChange
  }

  componentDidMount() {
    this.trackSlider() // ensure the slider-track goes to the button on load
  }

  trackSlider() {
    const slider = this.refs.slider
    // @ts-ignore
    const val = (slider.value - slider.getAttribute('min')) / slider.getAttribute('max') - slider.getAttribute('min')
    this.setState({ sliderBarValue: val })
  }

  changeCallback(event,index) {
    const indx = event.target.value
    this.setState({ value: event.target.value })
    // @ts-ignore
    this.handleChange(this.props.value[indx])
    this.trackSlider()
  }

  render() {
    const { value,sliderBarValue } = this.state
    const { currency,step,label,name } = this.props
    return (
      <div className='mb4 pt2 measure'>
        <Label name={name} label={label} val={currency ? `£${this.props.value[value]}` : this.props.value[value]} />
        <input
          name={name}
          id={name}
          ref='slider'
          className='w-100 appearance-none bg-transparent range-slider-thumb-custom'
          style={{
            backgroundImage: '-webkit-gradient(linear,left top,right top,' +
              'color-stop(' + sliderBarValue + ',#7d18fd),#E3E3E3)' +
              ')'
          }}
          type='range'
          min={0}
          max={this.props.value.length - 1}
          step={step}
          value={currency ? `£${value}` : value}
          // @ts-ignore
          onChange={this.changeCallback}
        />
      </div>
    )
  }
}

当我在没有货币道具的情况下使用它时，一切正常：

        <RangeSlider
          name={'Age'}
          label='Age'
          max={122}
          min={18}
          onChange={this.handleAgeChange}
          start={26}
          value={ageArrayRange}
        />

但是一旦添加currency={true}，滑块就会停止工作：

<RangeSlider
              name={'hourlyRate'}
              label='Hourly rate'
              onChange={this.choosingHourlyRate}
              start={100}
              step={50}
              currency={true}
              value={hourlyRateArrayRange}
            />

知道这是为什么吗？

Codesandbox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）