Как бы этот компонент выглядел без разрушения? - PullRequest
Новая
       8

Как бы этот компонент выглядел без разрушения?

0 голосов
/ 15 апреля 2020

У меня есть компонент Form, в котором я использую библиотеку Formik: 

const Form = () => {
    const {handleSubmit, values, handleChange} = useFormik({
      initialValues: {
          username: '',
          email: '',
          password: '',
          confirm_password: '',
      },
      onSubmit: (formValues) => {
          console.log('submit', formValues);
      },    
    });

   return (
   <form className="fform" onSubmit={handleSubmit} onChange={handleChange}/>
       <input name="username" value={values.username} onChange={handleChange} />
       <input name="email" value={values.email} onChange={handleChange} />
       <input name="password" value={values.password} onChange={handleChange} />
       <input name="confirm_password" value={values.confirm_password} onChange={handleChange} />
       <button type="submit">Submit Form</button>
   </form>
   );
};

Однажды учитель сказал:

здесь я делаю деструктуризацию:

const {handleSubmit, values, handleChange} =

Но как бы выглядел компонент Form, если бы в этом случае не использовался destructuring? То есть, как компонент может быть записан без деструктурирования, но чтобы в компоненте Form присутствовали useFormik методы? Потому что мне нужны эти методы в форме.

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

вы можете получить значение useFormik в одной константе 

const useFormikObj = useFormik({
  initialValues: {
    username: '',
    email: '',
    password: '',
    confirm_password: '',
  },
  onSubmit: (formValues) => {
    console.log('submit', formValues);
  },    
});

useFormik вернет объект, который содержит handleSubmit, values, handleChange (в соответствии с вашим примером)

так что теперь вы создадите отдельную константу для каждого свойства, к которому вы пытаетесь получить доступ 

const handleSubmit = useFormikObj.handleSubmit
const values = useFormikObj.values
const handleChange = useFormikObj.values

, и теперь остальная часть вашего приложения должна выглядеть так же

Другой пример

Если у вас есть такой объект 

const obj = {
  name: 'Andrew',
  age: 27,
}

, вы можете получить доступ к этим свойствам через обычную запись 

obj.name //Andrew
obj.age //27

Но если у вас есть чтобы использовать это несколько раз, вы можете захотеть избегать использования obj. каждый раз, поэтому вы можете использовать деструктурирование следующим образом 

const { name, age } = obj

, если бы это был массив, он был бы таким: 

const array = [1, 2, 3]
const [ x1, x2, x3 ] = array //x1 = 1, x2 = 2 and so on

Вы можете узнать больше об дескруктурировании здесь

Надеюсь, это поможет

0 голосов
/ 15 апреля 2020

Вы можете присвоить возвращаемое значение и объектной переменной 

const res = useFormik({

И вы можете использовать этот объект 

<form className="fform" onSubmit={res.handleSubmit} onChange={res.handleChange}/>
       <input name="username" value={res.values.username} onChange={res.handleChange} />
...
...