与Foundation Slider一起反应

Question

有没有人在React中使用了基础滑块组件？我试图根据滑块值捕获和设置状态，但我遇到了严重的问题。我正在寻找一种不使用jQuery的方法。

当输入类型设置为＆＃39;隐藏＆＃39;我似乎无法从滑块中获取任何数据。当我将其更改为＆＃39; number＆＃39;时，会出现一个输入框，我可以从中获取数据。最终的设计不包括输入框，所以我需要保持隐藏的＆＃39;属性。

有人似乎在我的代码中看到了一个缺陷吗？充其量，我得到了未定义的＆＃39;当我尝试设置状态时，再次，当我显示输入框时。

这是我到目前为止的代码......

  export class _DailyCheck extends Component {
  state = {
    levels: {
      sleep: 0,
      energy: 0,
      stress: 0
    },
    show: true
  }

  _renderDaily () {
    const { levels: { sleep, energy, stress } } = this.state
    return (
      <div>
        <div className='content'>
          <p className='headline-1 text-left'>
            How is your day
            going so far?
          </p>
          <div className='grid-x grid-padding-x'>
            <fieldset className='small-12 large-12 cell'>
              <label className='bold-body'>
                Sleep Quality
                <div
                  className='slider slider-margin'
                  data-slider
                  data-initial-start='3'
                  data-end='6'
                >
                  <span
                    className='slider-handle'
                    data-slider-handle
                    tabIndex='1'
                    aria-controls='sleep'
                  >
                  </span>
                  <span
                    className='slider-fill'
                    data-slider-fill
                  >
                  </span>
                  <input
                    type='range'
                    id='sleep'
                    value={sleep}
                    onClick={(e) => this._handleDailyChange(e) }
                  />
                </div>
              </label>
            </fieldset>
          </div>
        </div>
      </div>
    )
  }

  _handleDailyChange (event) {
    const levels = { ...this.state.levels }
    levels[event.target.name] = levels[event.target.value]
    this.setState({ levels })
  }