import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import { Button, Field, Icon } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

const styles = {
  wrap: {
    padding: '16rpx'
  },
  block: {
    marginBottom: '20rpx'
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: '20rpx',
    paddingBottom: '20rpx',
    marginTop: '20rpx'
  }
}


function MyComponent() {
    const field = Field.useField();

    const { init, setValue, reset } = field;

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

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

    return (
        <View style={styles.wrap}>
            <View style={styles.block}>
                <Text>useField</Text>
                <View style={styles.row}>
                    <input {...init('input', {initValue: 'test'})} />
                    <Button size="small" type="primary" onClick={onSetValue}> setValue </Button>
                    <Button size="small" type="primary" onClick={onGetValue}> getValue </Button>
                </View>
            </View>
        </View>
    );
 }


// render(<MyComponent />, null, { driver: DriverUniversal });

 export default MyComponent