Ввод текстового поля MaterialUI с получением неопределенных значений с помощью React Hooks - PullRequest
Новая
       16

Ввод текстового поля MaterialUI с получением неопределенных значений с помощью React Hooks

0 голосов
/ 25 июня 2019

Я использую React Hooks - useState и useEffect - для захвата ввода формы электронной почты / пароля из текстовых полей, предоставленных Material UI (в частности, с использованием BootstrapInput в разделе «Customized Inputs» на этой странице).

Я рассмотрел похожие вопросы StackOverflow о получении значений форм с помощью React Hooks.К сожалению, эти решения не работают для меня, так как я считаю, что моя проблема связана с текстовым полем пользовательского интерфейса материала, которое я использую.В решениях других вопросов в коде используется простой безстойный тег input.

Я попытался поместить функцию handleChange в InputField.js - в этом случае values.email и values.password обновляются и печатаются правильно.Однако проверка (с помощью функции validate) должна быть в пределах Form.js.handleChange использует useState (setValues) для установки переменной values, а validate использует values.Поэтому handleChange должен храниться в Form.js, где у меня возникла проблема.

Рабочая демонстрация здесь: https://glitch.com/~blue-peridot (нажмите Показать в верхнем левом углу рядом с проектомвведите имя и откройте консоль браузера, чтобы увидеть вывод ... игнорируйте предупреждения браузера)

Во-первых:

Из Form.js - я ожидаю values.email и values.password (строки 29-30) выводится на консоль по мере их ввода в InputField.

Фактический вывод - undefined

Во-вторых:

isSubmitting на один шаг позади,Я ожидаю, что значение isSubmitting будет установлено в True после однократного нажатия кнопки «Вход» (при условии, что введенные данные верны).Однако значение не обновляется до повторного щелчка.

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Несколько вещей в Form.js:

  1. В вашем хуке useEffect отсутствуют зависимости как на isSubmitting, так и на handleChange.
  2. Вы должны иметь возможность перемещатьсяvalidate вне компонента.
  3. Необязательно, но: поскольку вы передаете handleChange и handleSubmit другим компонентам, это повысит производительность, обернув их в useCallback хуки, например 
const handleChange = useCallback((event) => {
 event.persist();
 setValues(values => ({ ...values, [event.target.name]: event.target.value }));
}, [values]);

const handleSubmit = useCallback((event) => {
 if (event) event.preventDefault();
 setErrors(validate(values));
 setIsSubmitting(true);
}, [values]);

Если у вас есть настройка ESLint или вы можете, eslint-plugin-реагирующий-hooks поможет решить эти проблемы.

1 голос
/ 25 июня 2019

Вам необходимо передать свои реквизиты на ваш InputField компонент. В настоящее время у вас есть только label как опора.

, например 

const InputField = ({
    label,
...others
}) => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <FormControl className={classes.margin}>
                <InputLabel className={classes.label} shrink htmlFor="bootstrap-input">
                    {label}
                </InputLabel>
                <BootstrapInput {...others} />
            </FormControl>
        </div>
    )
}

Или вы можете пропускать только определенные предметы.

...