如何使 InputNumber antd 元素失焦？

Question

我的代码有这个问题，当我尝试使用 onchange 事件更改 InputNumber 的值时，焦点转移到第一个 InputNumber 元素而不是我想要更改的地方。 所以这会导致在 InputNumber 的每次更改时滚动页面
这是我的最小代码：
最小代码

帮助将不胜感激。

Answer 1

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

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);
        }}
      />

其他输入也是如此。

检查我的代码框

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