import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker, Layout, Form } from 'antd';

class BagSnapshot extends React.Component {
  submit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, fieldsValue) => {
      // ...
    });
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const endTimeConfig = {};

    return (
      <Form
        onSubmit={this.submit.bind(this)}
      >
        <Form.Item>
          {getFieldDecorator('endTime', endTimeConfig)(
            <DatePicker
              showTime={{
                format: 'HH:mm'
              }}
              format="lll"
              style={{
                width: '100%'
              }}
            />
          )}
        </Form.Item>
      </Form>
    );
  }
}

let MyForm = Form.create({
  hideRequiredMark: true
})(BagSnapshot);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      test: {
        a: 1
      }
    }

    setInterval(() => {
      this.setState({
        test: {
          a: 123
        }
      })
    }, 100);
  }

  render() {
    console.log('render');
    return (
      <MyForm
        test={this.state.test}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));