React项目中：寻找与onChange等效的addEventListener绑定事件

你要找的就是原生DOM的input事件——它和React的onChange表现完全一致，在用户输入（包括打字、粘贴、剪切等操作）时实时触发，而且能通过event.target.value拿到最新的输入值。

为什么之前的事件不行？ #

• change事件：原生DOM里的change确实是在元素失去焦点且内容修改后才触发，和React封装的onChange不是一回事，这就是你觉得它像onBlur的原因。
• keypress：这个事件是在按键按下时触发，但此时输入框的内容还没更新，所以拿到的是旧值，而且它还不处理右键粘贴、输入法选词这类非按键输入的场景。

代码示例 #

// 绑定input事件到文本输入框
document.getElementById('myTextInput').addEventListener('input', function(event) {
  console.log('实时输入值:', event.target.value);
});

// 绑定到textarea同理
document.getElementById('myTextarea').addEventListener('input', function(event) {
  console.log('实时文本域内容:', event.target.value);
});

额外说明 #

对于select、input type='date'这类元素，原生change事件的表现本来就和React的onChange一致，所以你可以继续用change事件绑定它们，不用换成input。

内容的提问来源于stack exchange，提问作者Tom Pauwels