antd 表单聚焦

antd 表单聚焦

在Ant Design（antd）中，要实现表单的聚焦，你可以使用Form组件的getFieldDecorator方法来绑定一个Input组件，并通过ref属性引用这个Input组件，然后调用其focus()方法来聚焦。以下是一个简单的例子：

 

 

import React from 'react';

import { Form, Input, Button } from 'antd';

 

class FocusForm extends React.Component {

constructor(props) {

super(props);

this.inputRef = React.createRef();

}

 

focusOnInput = () => {

this.inputRef.current.focus();

};

 

render() {

return (

<Form>

<Form.Item>

{form => (

<Input

ref={this.inputRef}

onPressEnter={this.focusOnInput}

placeholder="Click button to focus"

/>

)}

</Form.Item>

<Button onClick={this.focusOnInput}>Focus on Input</Button>

</Form>

);

}

}

 

export default FocusForm;

在这个例子中，我们创建了一个FocusForm类组件，它有一个inputRef引用一个Input组件。我们通过按钮的onClick事件调用focusOnInput方法，该方法通过this.inputRef.current.focus()聚焦到Input组件。