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

Question

我在代码中遇到这个问题，当我尝试使用 onchange 事件更改 InputNumber 的值时，焦点会转移到 First 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