如何取消对 InputNumber antd 元素的关注？

Question

我遇到了代码问题，当我尝试使用 onchange 事件更改 InputNumber 的值时，焦点转移到第一个 InputNumber 元素，而不是我想要更改的位置。因此，这会导致在每次更改 InputNumber
时滚动页面这是我的最小代码：
Minimal Code

不胜感激。

Answer 1

一个解决方案是在父组件中创建这些输入的引用，然后在发生更改时使用焦点函数。

class DemoComp extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef1 = React.createRef();
    this.inputRef2 = React.createRef();
  }

  getInputNumber = (e, para, inputRef) => {
    console.log(e, para);
    storeInputNumber[e] = para;
    inputRef.focus();
  };

和

      <InputNumber
        id="input 2"
        ref={input => {
          this.inputRef1 = input;
        }}
        onChange={e => {
          this.getInputNumber(e, "input 2", this.inputRef1);
        }}
      />

其他输入也一样。

检查我的codesandbox

https://codesandbox.io/s/practical-newton-918jn

如何取消对 InputNumber antd 元素的关注？

How to unfocus the InputNumber antd element?

javascript

focus

reactjs

antd