Как я могу очистить внутренний текст значения ref.current в React?

Question

Как я могу получить доступ к свойству внутреннего текстового значения ref.current.

По console.log(loginField.current) я получил:

      <div class="some name">
   <input aria-invalid="false" id="login" placeholder="Email" type="text" class="other name" value="">
</div>

Я установил loginField следующим образом:

        let loginField = React.createRef();

а также

                <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={LOGIN}
              type="text"
              value={values.login}
              disableUnderline={true}
              placeholder="Email"
              ref={loginField}             // I set it here
              onFocus={handleFocus}
              error={fieldsErrors.loginError !== ''}
              onChange={handleChange(LOGIN)}
            />
          </FormControl>

Мне нужно очистить внутренний ввод этого div от предыдущих значений.(установите его на '')

заранее спасибо

Рафаэль

Answer 1

Попробуйте использовать состояние, это довольно просто

      const component = () => {
  const [value, setValue] = React.useState("")

  return (
    <FormControl className={clsx(classes.margin, classes.textField)}>
      <StyledInput
        id={LOGIN} // not needed but you can keep for other uses
        type="text"
        value={value}
        disableUnderline={true}
        placeholder="Email"
        error={value !== ''}
        onChange={(e) => setValue(e.target.value)}
      />
   </FormControl>
  )
}

Но если вы все еще хотите использовать Ref, сбросьте его, как

      loginField.current.value = ''

вместо того

      loginField.current.reset();

Для справки о ref ()