SHINCHVEN'S HEXO

Use Ant Design Checkbox with getFieldDecorator

Count: 161Reading time: 1 min
2018/11/03 Share

Error

Form.getFieldDecorator is an Ant Design Form validation tool, it is used to wrapped input components and handle value and value validation. It is working fine with common component with a props named value, but it throws error when used to wrap a Checkbox.

error
1
Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?

Solution

Checkbox is a component that demonstrates and returns a checked status, it simply does not have a props named value build within. So the way to handle this error is simple, I just have to create a custom Checkbox which maps the options of Form.getFieldDecorator to Checkbox’s props.

React Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { PureComponent } from 'react';
import { Checkbox } from 'antd';

export default class CustomCheckbox extends PureComponent {
render() {
return (
<Checkbox
defaultChecked={this.props.initialValue}
checked={this.props.value}
onChange={this.props.onChange}>
{this.props.text}
</Checkbox>
);
}
}
CATALOG
  1. 1. Error
  2. 2. Solution