在antd内的form组件将它内部的多个输入框 用enter按键代替tab按键获取焦点
时间: 2024-02-09 17:10:31 浏览: 145
可以通过使用 `Form.Item` 的 `onPressEnter` 属性来实现。具体来说,你可以在需要获取焦点的输入框中添加一个 `ref`,然后在 `onPressEnter` 中使用 `ref.current.focus()` 将焦点设置到下一个输入框。以下是一个示例代码:
```
import { Form, Input } from 'antd';
const MyForm = () => {
const input1Ref = useRef(null);
const input2Ref = useRef(null);
const handlePressEnter1 = () => {
input2Ref.current.focus();
};
return (
<Form>
<Form.Item label="Input 1">
<Input ref={input1Ref} onPressEnter={handlePressEnter1} />
</Form.Item>
<Form.Item label="Input 2">
<Input ref={input2Ref} />
</Form.Item>
</Form>
);
};
```
在上面的代码中,我们使用了 `useRef` 来创建了两个输入框的引用,并在第一个输入框中设置了 `onPressEnter` 属性,当用户按下 Enter 键时,会调用 `handlePressEnter1` 函数,该函数将焦点设置到第二个输入框中。这样,用户在输入完第一个输入框后,可以直接按 Enter 键来跳转到第二个输入框。
阅读全文