反应 onInput - IE9/10 event.target.value 是空的？

Question

当 "onInput" 用作侦听事件时（in IE9/10），简单的受控输入不会根据用户输入更新值。 "onChange" 正常工作，但 "onInput" 已被选为我们的事件，以解决 IE11 中的粘贴值问题。

class TestComp extends React.Component {
  constructor(props){
    super(props);
    this.state = { value: "" };
    this.updateValue = this.updateValue.bind(this);
  }

  render(){
    return <input onInput={this.updateValue} value={this.state.value} />;
  }

  updateValue(evt){
    this.setState({ value: evt.target.value });
  }
};

https://codepen.io/anon/pen/KmJPGR

这是对受控输入的不当实施吗？如果是，如何解决？如果没有，还有哪些替代方案？

Answer 1

我仍然会使用 onChange 虽然我现在不能测试它我听说 onInput 在 IE9 上有一些问题。根据 React 文档：

For <input> and <textarea>, onChange supersedes — and should generally be used instead of the DOM's built-in oninput event handler.

如何为 IE11 中的 onChange 创建一个修复程序而不是使用其他侦听器？黑客，虽然我不建议这样做，但可能同时使用 onChange 和 onInput。请记住，Chrome 将触发两个调用，因此我建议仅在 userAgent 匹配时才传递 onInput。

我还发现这个 polyfill 修复了其中的一些问题（通过删除、清除、剪切值）但是无法测试它：https://github.com/buzinas/ie9-oninput-polyfill。

反应 onInput - IE9/10 event.target.value 是空的？

React onInput - IE9/10 event.target.value is empty?

javascript

internet-explorer-9

internet-explorer-10

reactjs