How can I clear the the inner text of a ref.current value, in React?

Question

How can I access the inner text value property of a ref.current.

By console.log(loginField.current) I got:

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

The way I set loginField, is:

  let loginField = React.createRef();

and

          <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>

I need to clear the inner input of this div from previous values. (set it to '')

Thanks in advance

Rafael

Try this https://stackoverflow.com/questions/62412963/how-to-reset-input-field-from-useref-in-react — Fahad Tahir, Aug 18 '21 at 20:16
thank you for answering, I tried loginField.current.reset(), but I get an error, saying that "loginField.current.reset is not a function". I also tried reset() in the references to the fields directly, but I also get an error — Rafael, Aug 18 '21 at 21:15

Fahad Tahir · Answer 1 · 2021-08-21T09:50:33.783

0

Since you mentioned that you are using MUI which basically gives a wrapped component according to docs here and to pass refrence to input you ll have to pass a prop to comonent as

   ...
   inputRef={myref}
   ...

edited Aug 21 '21 at 09:50

answered Aug 19 '21 at 12:01

Fahad Tahir

112
1
8

Hi @Fahad Tahir, I tried it all with no success. By doing console.log I found out that my ref value is something like "
", it is html, not an object (I guess that is because I am using Material UI’s FormControl), and it is a div that encloses an input, and the input has a value. How do I get to that input to set its value? Clearing the states is not clearing the values when the page first renders. However, it works perfectly – Rafael Aug 19 '21 at 12:47
can you share your StyledInput where you did styling – Fahad Tahir Aug 19 '21 at 16:11
Try this ``` const StyledButton = styled.button` min-width: 200px; font-size: 18px; padding: 7px 10px; `; const StyledInput = styled.input` min-width: 200px; font-size: 18px; padding: 7px 10px; `; function Profile() { let inputRef = useRef() const handleClear = () => { console.log(inputRef.current.value) inputRef.current.value = "" } return (
clear
) } ``` – Fahad Tahir Aug 19 '21 at 16:13
I am not using styled components directly, I am using Material UI, and the way I define StyledInput is: "const StyledInput = withStyles({ root: { '&$focused': { borderColor: '#B3B3B3' }, '&$error': { borderColor: '#D33F49' }, … })(Input);", This “withStyles” is imported from '@material-ui/core/styles' – Rafael Aug 19 '21 at 16:50
I didn't understand the definition you wrote – Rafael Aug 19 '21 at 16:57
try inputRef={loginField} instead of ref=() as MUI automatically have a wrapper according to the docs https://material-ui.com/api/input/ to assign ref to the input inside pass inputRef as a parameter and it ll be assigned to input inside – Fahad Tahir Aug 21 '21 at 09:44

How can I clear the the inner text of a ref.current value, in React?

1 Answers1