Customized Form Control Switch with warning

[shaozj]

Environment(required)

• antd version: 2.8.1
• OS and its version: osx ei capitan
• Browser and its version: google chrome 56.0.2924.87

What did you do? Please provide steps to re-produce your problem.

I created a customized Form control Switch based on antd Switch. And I got a warning.

code:

import {Switch as SwitchAntd} from 'antd';
import { Form, Button } from 'antd';
const FormItem = Form.Item;

class Switch extends React.Component {
  constructor(props) {
    super(props);
    const checked = (this.props.value == 1) ? true : false;
    let defaultProps = {
      checkedChildren: '开',
      unCheckedChildren: '关'
    } 
    console.log('this.props: ', this.props);
    this.state = {
      ...defaultProps,
      ...this.props,
      checked
    };
  }

  handleChange(checked) {
    this.setState({checked});
    const value  = checked ? 1 : 0;
    const onChange = this.props.onChange;
    onChange && onChange(value);
  }

  render() {
    return (
      <SwitchAntd {...this.state} onChange={::this.handleChange} />
    );
  }
}

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;
    const props = {
      checkedChildren: '上线',
      unCheckedChildren: '下线'
    };

    // Only show error after a field is touched.
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem>
          {getFieldDecorator('open', {
            initialValue: 1
          })(
            <Switch {...props} />
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
          >
            查看
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedMyForm = Form.create()(MyForm);

// write your demo code here, below is an example 

ReactDOM.render(<WrappedMyForm />, mountNode);

What do you expected?

No warning.

What happen?

Got a warning.

Re-producible online demo

Please paste my code on riddle or some online code running platform.

[benjycui]

Form.Item will add size=large to its children automatically.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.