Question

当“onInput”用作收听事件时，简单的受控输入不会根据用户输入更新值（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 docs：

对于<input>和<textarea>，onChange取代 - 通常应该使用，而不是DOM的内置oninput事件处理程序。

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

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

React onInput - IE9 / 10 event.target.value为空？

1 个答案: