{"id":329966,"date":"2022-02-22T15:01:22","date_gmt":"2022-02-22T15:01:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=329966"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=329966","title":{"rendered":"\u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React \u0441\u043e 165 \u0434\u043e 30 \u0441\u0442\u0440\u043e\u043a<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041e\u0447\u0438\u0441\u0442\u043a\u0430 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React Hook Form \u0438 Material UI <\/h2>\n
<\/figcaption><\/figure>\n

React Hook Form \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0432\u043e\u0434\u0430 \u0444\u043e\u0440\u043c\u044b \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 React.<\/p>\n

\u041d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n

\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c React Hook Form \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 Material UI.<\/p>\n

\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n

\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c react-hook-form<\/code>. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0435\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c react-hook-form<\/code>, \u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439<\/u><\/a>.<\/u><\/p>\n

\u0412\u0441\u0435, \u0447\u0442\u043e \u044f \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u2014 \u0432\u044b \u043d\u0435 \u043f\u043e\u0436\u0430\u043b\u0435\u0435\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n

\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434<\/h3>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c.<\/p>\n

import TextField from \"@material-ui\/core\/TextField\"; import React, { useState} from \"react\"; import {     Button,     Checkbox,     FormControlLabel,     FormLabel,     MenuItem,     Radio,     RadioGroup,     Select,     Slider } from \"@material-ui\/core\"; import {KeyboardDatePicker} from '@material-ui\/pickers'  const options = [     {         label: 'Dropdown Option 1',         value:'1'     },     {         label: 'Dropdown Option 2',         value:'2'     }, ]  const radioOptions = [     {         label: 'Radio Option 1',         value:'1'     },     {         label: 'Radio Option 2',         value:'2'     }, ]  const checkboxOptions = [     {         label: 'Checkbox Option 1',         value:'1'     },     {         label: 'Checkbox Option 2',         value:'2'     }, ]  const DATE_FORMAT = 'dd-MMM-yy'  export const FormBadDemo = () => {      const [textValue , setTextValue] = useState('');     const [dropdownValue , setDropDownValue] = useState('');     const [sliderValue , setSliderValue] = useState(0);     const [dateValue , setDateValue] = useState(new Date());     const [radioValue , setRadioValue] = useState('');     const [checkboxValue, setSelectedCheckboxValue] = useState<any>([])      const onTextChange = (e:any) => setTextValue(e.target.value)     const onDropdownChange = (e:any) => setDropDownValue(e.target.value)     const onSliderChange = (e:any) => setSliderValue(e.target.value)     const onDateChange = (e:any) => setDateValue(e.target.value)     const onRadioChange = (e:any) => setRadioValue(e.target.value)      const handleSelect = (value:any) => {         const isPresent = checkboxValue.indexOf(value)         if (isPresent !== -1) {             const remaining = checkboxValue.filter((item:any) => item !== value)             setSelectedCheckboxValue(remaining)         } else {             setSelectedCheckboxValue((prevItems:any) => [...prevItems, value])         }     }      const handleSubmit = () => {         console.log({             textValue: textValue,             dropdownValue: dropdownValue,             sliderValue: sliderValue,             dateValue: dateValue,             radioValue: radioValue,             checkboxValue: checkboxValue,         })     }      const handleReset = () => {         setTextValue('')         setDropDownValue('')         setSliderValue(0)         setDateValue(new Date())         setRadioValue('')         setSelectedCheckboxValue('')     }      return <form>          <FormLabel component='legend'>Text Input<\/FormLabel>         <TextField             size='small'             error={false}             onChange={onTextChange}             value={textValue}             fullWidth             label={'text Value'}             variant='outlined'         \/>          <FormLabel component='legend'>Dropdown Input<\/FormLabel>         <Select id='site-select' inputProps={{ autoFocus: true }} value={dropdownValue} onChange={onDropdownChange} >             {options.map((option: any) => {                 return (                     <MenuItem key={option.value} value={option.value}>                         {option.label}                     <\/MenuItem>                 )             })}         <\/Select>          <FormLabel component='legend'>Slider Input<\/FormLabel>         <Slider             value={sliderValue}             onChange={onSliderChange}             valueLabelDisplay='auto'             min={0}             max={100}             step={1}         \/>          <FormLabel component='legend'>Date Input<\/FormLabel>         <KeyboardDatePicker             fullWidth             variant='inline'             defaultValue={new Date()}             id={`date-${Math.random()}`}             value={dateValue}             onChange={onDateChange}             rifmFormatter={(val) => val.replace(\/[^[a-zA-Z0-9-]*$]+\/gi, '')}             refuse={\/[^[a-zA-Z0-9-]*$]+\/gi}             autoOk             KeyboardButtonProps={{                 'aria-label': 'change date'             }}             format={DATE_FORMAT}         \/>          <FormLabel component='legend'>Radio Input<\/FormLabel>         <RadioGroup aria-label='gender' value={radioValue} onChange={onRadioChange}>             {radioOptions.map((singleItem) => (                 <FormControlLabel value={singleItem.value} control={<Radio \/>} label={singleItem.label} \/>             ))}         <\/RadioGroup>          <FormLabel component='legend'>Checkbox Input<\/FormLabel>         <div>             {checkboxOptions.map(option =>                 <Checkbox checked={checkboxValue.includes(option.value)} onChange={() => handleSelect(option.value)} \/>             )}         <\/div>          <Button onClick={handleSubmit} variant={'contained'} > Submit <\/Button>         <Button onClick={handleReset} variant={'outlined'}> Reset <\/Button>      <\/form> }<\/code><\/pre>\n
FormBadDemo.tsx<\/em><\/p>\n
\u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0432\u043e\u0434\u0430 \u0444\u043e\u0440\u043c\u044b. \u041d\u043e \u0443 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n