javascript - react 范围输入 IE11 onChange 或 onInput 解决方法

Question

IE11 uses onChange instead of onInput对于 <input type='range'>元素。

react does not call either of these在 IE11 中。

onInput适用于 FF、Chrome 和 Edge，所以没问题。

沿着兔子洞向下会引出 here和 here , 建议使用 onMouseUp或 onClick ，但我也没有得到这个工作。

我试过各种监听器组合都无济于事。我什至试过this (当然，这也不起作用)。有人对此有解决方法吗？

Answer 1

经过一番挖掘，我选择了 react-range因为它轻巧、简单且有效。

render() 在其 source 中显示它是如何做到的:

render: function() {
    var props = _extends({}, this.props, {
      defaultValue: this.props.value,
      onClick: this.onRangeClick,
      onKeyDown: this.onRangeKeyDown,
      onMouseMove: this.onRangeChange,
      onChange: function() {},
      ref: this.setRangeRef
    });
    delete props.value;
    return React.createElement(
      'input',
      props
    );
  }

---

更新

看来这将在 React 16 中得到修复:https://github.com/facebook/react/issues/554#issuecomment-271579096

If you look at the history above, you will see that the issue was closed by #5746. If you open this PR, you will see that its milestone is set to 16.

So the fix will be in 16, and we can’t put it in 15.x because it introduces a breaking change in behavior.

I don’t know if it’s possible to backport it to 15.x. @jquense and @nhunzaker would likely be able to answer this.