import './demo13.css';
import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  const field = Field.useField();

  const { init, getError } = field;

  function onGetValue() {
    console.log(field.getValue('input'));
  }

  function onSetValue() {
    field.setValue('input', 'xyz');
  }

  return (
    <div className="demo">
      <Input
        {...init('input', {
          initValue: 'test',
          rules: [
            {
              required: true,
              pattern: /hello/,
              message: 'must be hello',
            },
          ],
        })}
      />
      <span style={{ color: 'red' }}>{getError('input')}</span>

      <br />
      <br />
      <Button onClick={onSetValue}> setValue </Button>
      <Button onClick={onGetValue}> getValue </Button>
      <br />
      <br />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('field-demo-14'));