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 👀

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()
    .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

huxiangtao/react-final-form-antd