Ant Design和Redux Form是两个独立的库,它们可以一起使用来创建强大的表单组件。下面是一个使用Ant Design和Redux Form的示例:
npm install antd redux-form
import React from 'react';
import { Form, Input, Button } from 'antd';
import { Field, reduxForm } from 'redux-form';
const CustomInput = ({ input, meta, ...rest }) => (
);
const MyForm = ({ handleSubmit }) => (
);
export default reduxForm({
form: 'myForm', // 给表单一个唯一的名称
})(MyForm);
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import MyForm from './MyForm';
const rootReducer = combineReducers({
form: formReducer, // 将Redux Form的reducer添加到应用的根reducer中
});
const store = createStore(rootReducer);
ReactDOM.render(
,
document.getElementById('root')
);
Ant Design with Redux Form
这样,你就可以使用Ant Design和Redux Form来创建表单组件了。在实际使用中,你可以根据自己的需求来定制表单字段和验证规则。