cupcakearmy/formhero
1
0
Fork 0
mirror of https://github.com/cupcakearmy/formhero.git synced 2024-12-23 00:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

testing

Browse Source
This commit is contained in:
cupcakearmy 2019-09-26 21:30:14 +02:00
parent 0c19233b4d
commit 7cc9654507
1 changed files with 53 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
test/test.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { useForm, HTMLInputExtractor } from '../' import { useForm } from '../'
const TextError: React.FC<{ error?: string }> = ({ error }) => !error const TextError: React.FC<{ error?: string }> = ({ error }) => !error
@ -10,7 +10,7 @@ const TextError: React.FC<{ error?: string }> = ({ error }) => !error
const Index: React.FC = () => { const Index: React.FC = () => {
const { auto, form, update, errors } = useForm({ const { auto, form, errors } = useForm({
username: '', username: '',
password: '', password: '',
type: 'formhero', type: 'formhero',
@ -22,18 +22,19 @@ const Index: React.FC = () => {
message: 'To short', message: 'To short',
}, },
awesome: (value) => !!value awesome: (value) => !!value
}, { extractor: HTMLInputExtractor }) })
const _submit = (e: React.MouseEvent) => { const _submit = (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
console.log(form, errors) console.log(form, errors)
} }
return ( return (
<div> <div>
<form> <form onSubmit={_submit}>
<div>Username</div> <div>Username</div>
<input {...auto('username')} /> <input {...auto('username')} />
{errors.username && 'Something went wrong'}
<TextError error={errors.username} /> <TextError error={errors.username} />
<br /> <br />
@ -52,11 +53,15 @@ const Index: React.FC = () => {
<br /> <br />
<div>Is it awesome?</div> <div>Is it awesome?</div>
<input type="checkbox" name="vehicle" {...auto('awesome', { setter: 'checked', extractor: (e) => e.target.checked })} /> <input type="checkbox" name="vehicle" {...auto('awesome', {
setter: 'checked',
getter: 'onChange',
extractor: (e) => e.target.checked
})} />
<TextError error={errors.awesome} /> <TextError error={errors.awesome} />
<br /> <br />
<button onClick={_submit}>Test</button> <button type="submit">Go 🚀</button>
</form> </form>
</div> </div>
) )