reactjs - useRef 挂钩以保持对 Antd 输入的关注

Question

我正在尝试使用antd <Table>, <Form>包装<Input>在Form.create()().

目前，每当我输入单个字符<Input>或移动鼠标时，该字段都会失去焦点。

我试图通过使用以下方式保持专注<Input>：

const inputEl = useRef(null);
...
<Input
  ref={inputEl}
  onChange={()=> {inputEl.current.focus()}}
/>

但这不起作用，因为你不能focus()在<Input>.

有什么办法可以让这个工作吗？

更新：这里是inputRef

标签： reactjsreact-hooksantd

Answer 1

您假设Input引用具有focus的功能input，但实际上它是它的实现，它在对象中input拥有正确的引用：input

inputEl.current.input.focus

对于每个自定义组件，你不能假设它甚至有任何类型的引用，这取决于实现。

const inputEl = useRef();
...
<Input
  ref={inputEl}
  onChange={()=> {inputEl.current.input.focus()}}
/>

const App = () => {
  const [value, setValue] = useState(DEFAULT_INITIAL);
  const onChange = e => {
    setValue(e.target.value);
    console.log(inputEl.current.input.focus);
  };
  const inputEl = useRef();
  return (
    <FlexBox>
      <Input ref={inputEl} value={value} onChange={onChange} />
    </FlexBox>
  );
};

旁注：如果您使用Form.createwith getFieldDecorator，则应避免使用，您可以在相关文档中详细onChange阅读。