import React, { useReducer, useRef } from 'react';
import Form from 'components/form';
import Input from 'components/input';
import Button from 'components/button';

export default () => {
    const [value, dispatch] = useReducer((prev, payload) => ({ ...prev, ...payload }), {
        name: '大明',
        age: 28,
        sex: 'M',
    });

    // const ref = useRef();

    return (
        <Form value={value} onChange={onChangeHandler} layout="vertical">
            <Form.Item label="姓名" requiredMark>
                <Input name="name" />
            </Form.Item>
            <Form.Item label="年龄" requiredMark>
                <Input name="age" />
            </Form.Item>
            <Form.Item label="性别">
                <Input name="sex" />
            </Form.Item>
            <Button onClick={onSubmitHander}>提交</Button>
        </Form>
    );

    function onChangeHandler(e: React.ChangeEvent<HTMLInputElement>) {
        dispatch({ [e.target.name]: e.target.value });
    }

    // 验证整个表单， 参数为一个数组，每一项为formItem的ref引用
    function onSubmitHander() {
        // console.log(ref.current);
    }
};