.How to clear custom input in react native using ref

Question

I'm working on an app which the users will enter large number of records continuously. Currently, I'm using State to clearing the input when submit is pressed. So by considering performance issues i'd like to clear the input using ref property. So i've tried by using these.

1- firstref.current.clear();
2- firstref.current.setNativeProps({ text: '' });
3- firstref.current.value = '';

But the input field is not clearing the value after submit. I'm using a custom input component. Here is a demo by clearing the input using state. Demo using state

 <View style={styles.fixedform}>
    <View style={styles.textinputViewleft}>
        <TextInput 
        style={styles.textinput} 
        ref={firstref}
        label="Digit"
        returnKeyType="next"
        value={digit.value}
        onChangeText={(text) => { setDigit({ value: text, error: '' }); if (text.length === 3) { ref.current.focus(); } }}
        error={!!digit.error}
        errorText={digit.error}
        keyboardType="numeric"
        maxLength={3}
        minLength={3}/>
    </View>
    <View style={styles.textinputView}>
        <TextInput 
        style={styles.textinput} 
        ref={ref}
        label="Count"
        value={count.value}
        onChangeText={(text) => setCount({ value: text, error: '' })}
        error={!!count.error}
        errorText={count.error}
        keyboardType="numeric"
        maxLength={3}/>
    </View>
    <View style={styles.textinputView}>
        <Button loading={loading} disabled={disabled} style={styles.buttonView} mode="contained" onPress={onSubmitPress}>Submit</Button>
    </View>
  </View>

I did answer this question with working example here: stackoverflow.com/a/65597149/12608714 , oh wait you are the same guy! — b3hr4d
– b3hr4d, Commented Jan 21, 2021 at 9:50
@b3hr4d I've tried the method that you've suggested me to do for reducing unwanted rendering . But after implementing that also my issue wat not solved fully. So i came back to the old one and splitted my components into parent and child . That solved my issue but now i'm just trying to reduce the number of state calls . Thatswhy i moved to ref method. — sooraj s pillai
– sooraj s pillai, Commented Jan 21, 2021 at 10:08

armin yahya · Accepted Answer · 2021-01-21 11:25:28Z

1

looks like this is a bug in TextInput of react-native-paper package.

also this line:

scrollViewRef.current.scrollToEnd({animated: true})

is giving me an error:

Cannot read property 'scrollToEnd' of undefined.

I commented this like to see what is happening with refs.

First of all, you cannot get the value of TextInput with ref (not yet).

I continue changing the code and i noticed that

digitRef.current.focus();

this line is focusing and also giving TextInput the previous text!

you can see that by adding setTimeout between focus and clear to see what's happening.

workaround is using TextInput of 'react-native' instead of 'react-native-paper'.

here is a working code:

https://snack.expo.io/@arminya/demoprjct

answered Jan 21, 2021 at 11:25

armin yahya

1,5169 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D10S · Accepted Answer · 2021-01-21 09:12:22Z

0

Instead of using "React.useRef" you should use "React.createRef".

const firstref = React.createRef(null);

Then

firstref.current.clear();

will work

answered Jan 21, 2021 at 9:12

D10S

1,5692 gold badges9 silver badges15 bronze badges

5 Comments

Tommy Leong Over a year ago

Perhaps can you can further explain why createRef is more suitable than useRef in this context?

sooraj s pillai Over a year ago

@D10S I've tried this but still the same issue. Not clearing the value from input.

D10S Over a year ago

I checked it on the snack. it works. you can also add ({ value: '' });. Note that thise 2 lines need to be called before the function's return.

sooraj s pillai Over a year ago

@D10S Yes , i've tried as you mentioned here but its showing a error like this Unhandled Rejection (TypeError): firstref.current is null . This is how i implemented jsfiddle.net/ksqguz5p

D10S Over a year ago

Your problem is in the axios.post statement. You can't use "then" as you did. Try switching the code to async-await as the submit function is already declared as async.

Ethan Vu · Accepted Answer · 2021-01-21 09:45:40Z

0

What you looking for is to make react rerender after changing ref which is imposible.

If you want to trigger a re-render after the ref changes, you must use useState instead of useRef. Only that way can you ensure that the component will re-render.

As stated in React document

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

answered Jan 21, 2021 at 9:45

Ethan Vu

2,9971 gold badge12 silver badges26 bronze badges

Collectives™ on Stack Overflow

.How to clear custom input in react native using ref

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related