import { useForm, useFormItem, useValid } from "../package/FormTool";
import { useEffect } from "react";

function Index() {
  const { state: form, hooks: formHooks, set } = useForm({
    name: "init value",
    password: ""
  });
  const items = {
    name: useFormItem(formHooks.name, (val: any) =>
      /^[0-9]{3,10}$/.test(val) ? "" : "必须为3-10位数字"
    ),
    password: useFormItem(formHooks.password)
  };
  const valid = useValid(items);

  useEffect(() => {
    setTimeout(() => {
      set("name", "another value");
    }, 1000);
  }, []);
  return (
    <div>
      <input {...items.name.inputProps}></input>
      <p>{items.name.errMessage}</p>
      <input
        {...items.password.inputProps}
        placeholder='请输入密码'
        type='password'
      ></input>
      <p>{items.password.errMessage}</p>
      <button
        onClick={() => {
          console.log(valid);
        }}
      >
        submit
      </button>
    </div>
  );
}

export default Index;