0.0.3 • Published 4 years ago
react-final-form-antd v0.0.3
react-final-form-antd
react-final-form-antd
is a set of
wrappers to facilitate the use of antd components with
react-final-form
.
Live Demo :eyes:
Installation
Using yarn:
$ yarn add react-final-form-antd
Using npm:
$ npm install --save react-final-form-antd
Available Components
- Select
- Radio Buttons
- DatePicker
- MonthPicker
- NumberField
- TextField
Usage
Rather than import your component class from antd
, import it from react-final-form-antd
and then pass the component class directly to the component
prop of Field
.
import { Form, Field } from 'react-final-form'
import {
SelectField,
TextField,
} from 'react-final-form-antd'
class MyForm extends Component {
handleSubmit = (data) => {
// Do something
}
render() {
return (
<Form
onSubmit={this.handleSubmit}
render={({ handleSubmit, pristine, invalid }) => (
<form>
<Field name="username" component={TextField} hintText="Street"/>
</form>
)}
/>
);
}
}
export default MyForm
or you can check stories code click
Instance API
getRenderedComponent()
Returns a reference to the UI component that has been rendered. This is useful for
calling instance methods on the UI components. For example, if you wanted to focus on
the username
element when your form mounts, you could do:
componentWillMount() {
this.refs.firstField
.getRenderedComponent()
.focus()
}
as long as you specified a ref
and withRef
on your Field
component.
render() {
return (
<form>
...
<Field name="username" component={TextField} withRef ref={r=>(this.textField = r)}/>
...
</form>
)
}
Inspired by redux-form-material-ui by erikras
Forked from redux-form-antd by zherebko dmitry