html - 使用 Material UI 清除受控表单中的输入的问题

Question

我有一个使用 Material UI 的 FormControl 制作的受控表单，我在开始时初始化了支持状态（对于每个输入），但这些值在开始时并没有到达实际元素

       <FormGroup id="entireForm" ref={formRef}>
          <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={LOGIN}
              type="text"
              value={values.login}
              disableUnderline={true}
              placeholder="Email "
              ref={loginField}
              onFocus={handleFocus}
              error={fieldsErrors.loginError !== ''}
              onChange={handleChange(LOGIN)}
            />
          </FormControl>
          {fieldsErrors.loginError && <p style={styles.errorStyle}>{fieldsErrors.loginError}</p>}
          <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={PASSWORD}
              type={showPassword ? 'text' : 'password'}
              value={values.password}
              disableUnderline={true}
              placeholder="Contraseña"
              ref={passwordField}
              onChange={handleChange(PASSWORD)}
              onFocus={handleFocus}
              error={fieldsErrors.passwordError !== ''}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
            />
          </FormControl>
          {fieldsErrors.passwordError && <p style={styles.errorStyle}>{fieldsErrors.passwordError}</p>}

          <Button
            className="mt-4 ml-auto"
            size="lg"
            type="submit"
            onClick={() => handleSubmit(dispatch, checkInputContent, values, fieldsErrors, clearFields)}
          >
            INIT SESSION
          </Button>
        </FormGroup>

每个输入的支持状态是

  const [values, setValues] = React.useState({
    login: '',
    password: ''
  });

我正在使用 ref 值来执行类似的操作

    loginField.current.value = ''

我也试过

    loginField.current.reset()

或者

    formRef.current.reset()

任何尝试都没有成功

我能做什么？

提前致谢

拉斐尔

标签： htmlreactjsmaterial-uiform-controluse-ref