import React from 'react';
import { Form, Input } from 'quanta-design';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 12 },
};

const onFinish = values => {
  console.log('Success:', values);
};

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

class FormRef extends React.Component {
  formRef = React.createRef();

  componentDidMount() {
    this.formRef.current.setFieldsValue({
      username: 'chris',
      mobile: '18352963126',
    });
  }

  render() {
    return (
      <Form
        {...layout}
        ref={this.formRef}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="用户名" name="username" required={false}>
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item label="手机" name="mobile" required={false}>
          <Input placeholder="请输入手机号码" />
        </Form.Item>
      </Form>
    );
  }
}

export default FormRef;