Сброс форм формы после смены пользователя - PullRequest
Новая
       8

Сброс форм формы после смены пользователя

0 голосов
/ 31 марта 2020

У меня есть список пользователей, и после того, как вы щелкнете по одному из них, появится ящик, и отобразятся некоторые сведения о пользователе, а под ними появится форма, состоящая из пароля и поля подтверждения пароля, если администратор хочет изменить определенный пароль пользователя, проблема в том, что когда я что-то пишу в поле пароля и решаю сменить выбранного пользователя, пароль и пароль подтверждения не сбрасываются, чтобы быть пустыми, они все еще заполнены тем, что я ранее написал, мне не нужно решение, которое состоит из refre sh после отправки нового пароля. 

<Formik
                    enableReinitialize={false}
                    validateOnMount={true}
                    validationSchema={passwordSchema}
                    initialValues={{ password: "", confirmPassword: "" }}
                  >
                    {formikProps => {
                      const { values, handleChange, isValid } = formikProps;
                      setDisabled(!isValid);
                      return (
                        <React.Fragment>
                          <Grid item xs={6} md={7}>
                            <TextField
                              margin="normal"
                              autoFocus
                              className={clsx(
                                classes.textField,
                                classes.margin
                              )}
                              required
                              id="password"
                              name="password"
                              label={<Translate i18nKey="password" />}
                              fullWidth
                              value={values.password || ""}
                              onChange={e => handleChange(e)}
                            />
                          </Grid>
                          <Grid item xs={6} md={7}>
                            <TextField
                              margin="normal"
                              autoFocus
                              className={clsx(
                                classes.textField,
                                classes.margin
                              )}
                              required
                              id="confirm_password"
                              name="confirmPassword"
                              label={<Translate i18nKey="re_enter_password" />}
                              fullWidth
                              value={values.confirmPassword || ""}
                              onChange={e => handleChange(e)}
                            />
                          </Grid>
                          <Button
                            className={classes.btn}
                            onClick={(event, password) =>
                              modifyPassword(values.password)
                            }
                            variant="contained"
                            color="primary"
                            position=""
                          >
                            Change Password
                          </Button>
                        </React.Fragment>
                      );
                    }}
                  </Formik>

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

useEffect(() => {
    setState(event);
  }, [event]);

Функция modifyPassword обеспечивает отправку нового пароля.

1 Ответ

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

Вы установили enableReinitialize=true (это позволяет вам изменять исходные значения при каждом его изменении)

, затем измените ваш initialValues, чтобы он стал одним из useState, например: 

const [userState,setUserState] = useState({
 password:'',
 confirmPassword:''
})

// your formik component...
<Formik
enableReinitialize={true} // changes here
validateOnMount={true}
validationSchema={passwordSchema}
initialValues={userState} // changes here
... > ... </Formik>

затем в вашем useEffect при смене пользователя просто позвоните 

setUserState({
 password:'',
 confirmPassword:''})

Ваш Formik сбросит состояние. Идея есть. Или вместо useEffect вы можете вызывать setUserState к значению по умолчанию при каждом изменении вашего пользователя.

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

Отредактировано

для того, чтобы иметь тот же пароль и подтвердить пароль, Это может произойти из-за handleChange (не думайте, что пользовательский интерфейс материала работает из коробки с formik) 

const { values, handleChange, isValid, setFieldValue } = formikProps;
setDisabled(!isValid);

 // add this
const myHandleChange = (e)=>{
 const {name,value} = e.target;
 setFieldValue(name,value)
}
return (...)

Затем в вашем onChange={myHandleChange}

...