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

Answer 1

您假设Input引用具有focus的{​​{1}}功能，但是实际上由于它是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.create一起使用，则应避免使用getFieldDecorator，并且yon可以阅读in detail at related docs.