Question

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

我们将不胜感激。

Answer 1

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

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

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

1 个答案: