在 React 中处理真正的 `change` 事件

Question

在 javascript 中，input 具有 change 事件，当输入失去焦点或用户使用升压或降压功能时发生type="number" 事件，但不是在正常输入时发生。

document.querySelector("input").addEventListener("change", e => {
  console.log(e.type, e.target.value)
})

<input type="number" step="0.01"> <button> </button>

但是当我使用 react 时，它会将 change 事件替换为 input 事件，该事件也发生在打字时：

function App() {
  const [val, setVal] = React.useState("")
  
  function onChange(e) {
    console.log(e.type, e.nativeEvent.type, e.target.value)
    setVal(e.target.value)
  }
  
  return <input type="number" step="0.01" value={val} onChange={onChange} />
}

ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="//unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<span id="app"></span> <button>&nbsp;</button>

我需要处理打字时不会发生的正常change 事件。
我该怎么做？

PS：片段中的按钮是一个可以tab从input跳转到的地方。

是的，“当键入时会导致编辑值出现问题”部分确实有点帮助，尽管这对我来说似乎是代码异味，可能是 XY 问题。您能否分享在以正常 React 方式使用 onChange 时，输入输入是如何导致问题的？

我不想完全拒绝使用它，我只想同时使用它。

这是一个有问题的例子：

• 您不能在小数部分使用退格（除非您输入了超过 2 个十进制数字）
• 如果在小数部分使用delete，则加零，光标跳到末尾
• 如果当前值为数字，例如1.<cursor>20，并且您输入数字，光标将跳到末尾
• 如果当前值类似于<cursor>1000.00，然后按删除，数字变为0.00
• 如果您尝试在空输入中写入，则在按下第一个数字后会变成7.00<cursor>，并且很难输入类似 7.23 的内容
• 我很难从输入中删除所有值，因为它变成了0.00，直到你全部选择它
• 我认为，还有更多问题

function App() {
  const [val, setVal] = React.useState("")
  
  function onChange(e) {
    console.log(e.type, e.nativeEvent.type, e.target.value)

    setVal(e.target.value == +e.target.valueAsNumber.toFixed(2)
      ? e.target.valueAsNumber.toFixed(2)
      : e.target.value
    )
  }
  
  return <input type="number" step="0.01" value={val} onChange={onChange} />
}

ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="//unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<span id="app"></span> <button>&nbsp;</button>

如果我尝试使用onBlur fpr 格式，它会变得更好，但是：

• 当您单击 step up 或 step down 按钮或按 up 或 down 时，数字未格式化在具有相同效果的键盘上：

function App() {
  const [val, setVal] = React.useState("")
  
  function onChange(e) {
    console.log(e.type, e.nativeEvent.type, e.target.value)
    setVal(e.target.value)
  }
  
  function onBlur(e) {
    console.log(e.type, e.nativeEvent.type, e.target.value)
    if (e.target.value && e.target.value == +e.target.valueAsNumber.toFixed(2)) {
      setVal(e.target.valueAsNumber.toFixed(2))
    }
  }
  
  return <input type="number" step="0.01" value={val} onChange={onChange} onBlur={onBlur} />
}

ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="//unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<span id="app"></span> <button>&nbsp;</button>

所以我想使用出现在模糊和台阶上的change。

Answer 1

这里有一个拦截所有感兴趣的输入类型的方法，链接到codesandbox -> https://codesandbox.io/s/summer-resonance-58n15?file=/src/App.js:

function App() {
  const [val, setVal] = React.useState("");

  function onChange(e) {
    if (e.nativeEvent.inputType === "insertText") {
      console.log("input");
      // Warning: Using undefined would also comprehend other events
      // that may be not specified right now in the documentation, 
      // but could be emitted, hence causing bugs.
      // Maybe a possible future improvement could be to specify
      // this particular inputType.
    } else if (e.nativeEvent.inputType === undefined) {
      if (e.target.value > val) {
        console.log("step up");
      } else {
        console.log("step down");
      }
    } else if (e.nativeEvent.inputType === "deleteContent") {
      console.log("deleting");
    }
    setVal(e.target.value);
  }

  return (
    <React.Fragment>
      <input type="number" step="0.1" value={val} onChange={onChange} />{" "}
      <button>&nbsp;</button>
    </React.Fragment>
  );
}

Answer 2

您可以像在 Javascript 中一样简单地创建输入的 ref 并创建 eventListener：

import React from "react";
import { render } from "react-dom";

const App = () => {
  const inputRef = React.useRef();

  React.useEffect(() => {
    inputRef.current.addEventListener('change', (e) => console.log(e.target.value))
  })

  return (
    <div>
      <input ref={inputRef} type="number" />
    </div>
  );
};

render(<App />, document.getElementById("root"));