反应垂直范围滑块始终重置为默认值，忽略新状态

Question

我正在使用垂直范围滑块来控制 React 组件中的音量。

在 Chrome 中一切都按预期工作，但在 Firefox 中，无论您将其更改为什么值，它总是会恢复为默认值 - 完全忽略新状态。

该功能实际上在 Firefox 中工作(移动滑块时音轨的音量按预期更改(，但一旦我mouseup它就会切换回默认值。

这是完整的音量组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Volume extends Component {
  _isMounted = false;
  slider = null;
  state = {
    volume: 100
  };
  componentDidMount() {
    this._isMounted = true;
    this.slider = document.getElementById('volume');
    this.slider.addEventListener('mouseup', this.hideSlider, false);
  }
  componentWillUnmount() {
    this._isMounted = false;
    this.slider.removeEventListener('mouseup', this.hideSlider, false);
  }
  hideSlider = () => {
    if (this._isMounted) {
      this.slider.style.display = 'none';
    }
  };
  onChange = e => {
    let newState = { volume: e.target.value };
    let value = e.target.value / 100;
    this.setState(newState, function() {
      this.props.setVolume(value);
    });
  };
  render() {
    console.log(this.state.volume);
    return (
      <div id="volume">
        <input
          type="range"
          orient="vertical"
          min="1"
          max="100"
          step="1"
          value={this.state.volume}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
Volume.propTypes = {
  setVolume: PropTypes.func.isRequired
};
export default Volume;

我什至设置了 setState 回调函数以避免潜在的竞争条件，但仍然没有爱......

可能与我在mouseout上隐藏滑块(使用 CSS(有关吗？Chrome对此完全没有问题吗？

澄清一下 - 这是在 Firefox 上重置为默认值的volume状态mouseout，进而再次将范围滑块设置为默认值。

Answer 1

经过一番试验和错误，事实证明是CSS规则使滑块默认为Firefox上的原始值。

默认情况下，滑块是隐藏的，

单击一个图标以(取消隐藏(显示它，一旦值被更改并且您在范围滑块上mouseup以下 css 规则将调用以下 css 规则来隐藏它：

this.slider.style.display = 'none';

这会立即恢复 Firefox 中的默认值 - 将其发送到状态，但如原始问题中所述 - 这在 Chrome 中工作得很好。所以Firefox不喜欢元素被隐藏的事实，非常奇怪的行为，以前从未遇到过这个。

无论如何，解决方案是在CSS规则上添加一个setTimeout：

hideSlider = () => {
   setTimeout(this.doit, 300);
};
doit = () => {
   this.slider.style.display = 'none';
};

烦人的怪癖必须克服只是为了火狐，但至少它可以工作。