import React from 'react';

import Validator from '../index';
import Button from '../../button/index';

import Input from '../../input/index';

export default class demoMsg extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  scroll = () => {
    this.refs.validator.scrollToErrorField(0);
  }

  alertResult = () => {
    alert(this.refs.validator.isFieldValid('field2'));
  }

  resetField = () => {
    this.refs.validator.resetField('field3');
  }

  render() {
    return (
      <Validator ref="validator">
        <Input
          name="field"
          placeholder="field"
          data-required
          data-patterns={[{
            key: 'date',
            msg: '请输入日期'
          }]}
        />
        <br />
        <Input
          name="field2"
          placeholder="field2"
          data-required
          data-patterns={[{
            key: 'date',
            msg: '请输入日期'
          }]}
        />
        <br />
        <Input
          name="field3"
          placeholder="field3"
          data-required
          data-patterns={[{
            key: 'date',
            msg: '请输入日期'
          }]}
        />
        <br />
        <Button onClick={this.scroll}>scrollToErrorField</Button>
        <Button onClick={this.alertResult}>isFieldValid('field2')</Button>
        <Button onClick={this.resetField}>resetField('field3')</Button>
      </Validator>
    );
  }
}