相关疑难解决方法(0)

我正在尝试测试滑块组件.

该滑块组件的宽度可以变化.当您单击滑块的"轨道"时,它应该更改值并触发onChange回调.该值基于您在轨道上单击的位置.如果在最小值为100且最大值为200时单击中间点,则应报告值150.

我遇到的问题是,当我使用ReactTest.renderIntoDocument组件渲染组件时没有任何宽度,因此当您单击它时它无法计算新值.

这是组件 Slider.js

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { noop } from 'lodash';
import style from './style.scss';

export default class Slider extends React.Component {
  render() {
    return (
      <div
        className='Slider'
        onClick={this.handleClick.bind(this)}
        {...this.props}
      >
        <div
          className='handle'
          style={{left: `${this.calculateLeft()}%`}}>
        </div>
        <div className='track'></div>
      </div>
    );
  }

  handleClick(e) {
    let node = ReactDOM.findDOMNode(this);
    let {clientX, clientY} = e;
    let {offsetLeft, offsetWidth, clientWidth} = node;
    let xPercent = …