/
githubmirror
/
react-hook-form
Обзор
Документация
Войти
/
githubmirror
/
react-hook-form
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/V6/normalizeField.tsx
67 строк
2 KB
Bill
🌐 prettier the entire code base (#5118)
10 май 2021, 10:18
Не верифицирован
10 май 2021, 10:18
10fe39d
Код
Авторство
О чём код?
import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import NumberFormat from 'react-number-format'; import { TextField, ThemeProvider, createMuiTheme } from '@material-ui/core'; const theme = createMuiTheme({ palette: { type: 'dark', }, }); const defaultValues = { priceInCents: 1234567, muiPriceInCents: 1234567, }; function App() { const form = useForm({ defaultValues }); const onSubmit = (data) => { form.reset(defaultValues); }; return ( <ThemeProvider theme={theme}> <form onSubmit={form.handleSubmit(onSubmit)}> <label htmlFor="priceInCents">Price</label> <label htmlFor="muiPriceInCents">Material UI Price</label> <Controller name="muiPriceInCents" control={form.control} render={(props) => <MuiCurrencyFormat {...props} />} /> <input type="submit" /> <input style={{ display: 'block', marginTop: 20 }} type="button" onClick={() => form.reset(defaultValues)} value="Custom Reset" /> <pre style={{ color: '#fff', marginTop: 24 }}> {JSON.stringify(form.watch(), null, 2)} </pre> </form> </ThemeProvider> ); } const MuiCurrencyFormat = (props) => { const { onChange, value, ...rest } = props; return ( <NumberFormat customInput={TextField} {...rest} value={value} fullWidth thousandSeparator={true} decimalScale={2} onValueChange={(target) => { onChange(target.floatValue); }} isNumericString prefix="$ " /> ); };