why i can not use passed refs in input element

Question

I am trying to focus on error fields inside of a form and I am using ref to do that but somehow ref always returns null and I am getting errors, I want to use/pass this ref to focus on error field , here error is stored in state which i have not included in code

here is the basic code,

class Form extends Component {
    constructor(props) {
        super(props);

        this.textInput = React.createRef();
        this.getErrors = this.getErrors.bind(this);
    }

    componentWillUnmount() {
        /////
    }

renderSubmitAction() { 

if(errors) {
            
            this.textInput.current.focus();
            
        }

}


render() {
return (
<View key={propertyName}>
                        <FormInput
                            id={id_prefix + propertyName}
                            key={propertyName}
                            ref={this.textInput}
                        />
                    </View>


)

const submitButton = this.renderSubmitAction();

        return (
            <View key={this.state.submitId} style={props.style}>
                {children}
                {props.children}
                {submitButton}
            </View>
        );

}

score 0 · Answer 1 · answered Sep 12 '22 at 15:59

0

Problem

You are running this:

this.textInput.current.focus();

before this happens:

<FormInput
  id={id_prefix + propertyName}
  key={propertyName}
  ref={this.textInput}
/>

Solution

I'm not sure what this is supposed to do:

const submitButton = this.renderSubmitAction();

But you probably wanted to use this:

const submitButton = this.renderSubmitAction;

answered Sep 12 '22 at 15:59

Konrad

21,590
4
28
64

can not do this as submitButton is used to submit the form ,hence i am trying to run this.textInput.current.focus(); inside renderSubmitAction function – Curious_guy Sep 12 '22 at 16:05
I don't see any button in your code – Konrad Sep 12 '22 at 16:10
Scroll down you will see this , return ( {children} {props.children} {submitButton} ); – Curious_guy Sep 12 '22 at 16:13
Why would you submit the form in every frame instead of doing it on click? – Konrad Sep 12 '22 at 18:48
No Form is a component and it takes input field names as props and has a submit button with it. – Curious_guy Sep 12 '22 at 19:09

why i can not use passed refs in input element

1 Answers1

Problem

Solution