如何使 onChange 仅在 React 中更改值后触发答案

【问题标题】：How to make onChange only fire once value is changed in React如何使 onChange 仅在 React 中更改值后触发
【发布时间】：2021-10-03 04:19:15
【问题描述】：

我在我的 React 应用程序中使用范围输入。我想在范围滑块更改后（而不是在更改时）记录选择的值。这是我的问题的一个例子：

const App = () => {
  const handleChange = (e) => {
    console.log(e.target.valueAsNumber);
  }
  return <input type="range" onChange={handleChange}/>
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

如果您查看浏览器控制台，则会在您滑动范围滑块时记录该值。我想要的输出是这样handleChange 回调只有在您释放滑块后才会触发。我希望它的行为方式与 onChange 在普通 HTML 中的行为方式相似：

const handleChange = (e) => {
  console.log(e.target.valueAsNumber);
}

&lt;input type="range" onChange="handleChange(event)"/&gt;

似乎反应使onChange 表现得像onInput，在我的情况下这是不可取的。我是否缺少一个简单的道具来完成这项工作？还是我需要使用 refs 或其他方法来使这项工作按预期进行？

【问题讨论】：

你试过onMouseUp吗？
@SamridhTuladhar - 谢谢，onMouseUp 可以工作，我可能会尝试这样做。但是，如果用户使用tab 选择范围输入，然后使用箭头键< 和> 更改滑块，则会出现问题。
会onFocusOut 帮忙吗？
从 ref 设置 onChange，如下所示：stackoverflow.com/a/62383569/11218031
@SamridhTuladhar 看起来 onFocusOut 在 React 中不起作用。但也许onMouseUp 和onBlur 的组合也可以工作。

标签： javascript reactjs onchange

【解决方案1】：

您想要的行为是onchange 事件监听器。不幸的是，React 将 onChange 属性连接到 oninput 事件处理程序。

还有一个关于这个的活跃问题：https://github.com/facebook/react/issues/3964 Document how React's onChange relates to onInput #3964

简单的解决方法是使用 ref 使用 onchange 事件侦听器。

const NewInput = (props) => {
  const setRef = useCallback((e) => {
    e.target.onchange = props.onChange || null;
  }, [props.onChange]);
  return <input ref={setRef} {...props} />
}

这里讨论另一种方法：In React, what's the difference between onChange and onInput?

【讨论】：