您好,登錄后才能下訂單哦!
要使用Ant Design的Form.create方法,首先需要導入Form和FormItem組件。然后在Form.create方法中傳入一個組件作為參數,這個組件可以是一個類組件或者函數組件。在傳入的組件中,可以通過this.props.form獲取Form的實例,并使用Form提供的方法來處理表單數據。
以下是一個示例代碼:
import React from 'react';
import { Form, Input, Button } from 'antd';
class MyForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item label="Username">
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(<Input />)}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
}
const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm);
export default WrappedMyForm;
在這個示例中,我們創建了一個MyForm組件,并使用Form.create方法將其包裝成一個高階組件WrappedMyForm。在MyForm組件中,通過this.props.form來獲取Form實例,并使用getFieldDecorator方法來創建表單項。handleSubmit方法用來處理表單提交事件,通過validateFields方法來驗證表單數據。最后通過Form.create方法將MyForm包裝成WrappedMyForm并導出。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。