Focus redux-form element onClick of button

Question

I am using below code to generate input field using redux-form

    import { Field } from 'redux-form';
    focusForm(){
    }

    <Field
        onClick={() => this.showMessage()}
        placeholder={this.props.placeholderText}
        ref="qaQuery"
        className="form-control"
        type="text"
        component="input"
        name={"inputField"}
        id={this.props.name}
    />
    <Button onClick={() => focusForm()}

I want to focus the field onClick of button. how we can achieve this. I tried with below options:

this.refs['qaQuery'].focus() //Not working - return Field and not actual input filed
document.querySelector("input[name='inputFileName']").focus(); //bad method

Please help me to achieve this, thanks

`this.refs[qaQuery].focus()` is wrong. Try -> `this.refs["qaQuery"].focus()` — Anand Undavia, Nov 27 '18 at 12:05
Yeah tried same but not working coz qaQuery is ref for redux form — pareshm, Nov 27 '18 at 12:07
Adding to @AnandUndavia comments, you should use [callback refs](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) instead of string refs — Shubham Khatri, Nov 27 '18 at 12:08
Problem is with redux form element, with normal input file we can use ref and its working — pareshm, Nov 27 '18 at 12:26
[This](https://stackoverflow.com/a/51267666/3719788) might be helpful. — Triyugi Narayan Mani, Nov 27 '18 at 13:02

score 0 · Accepted Answer · answered Dec 05 '18 at 05:15

Below is my answer:

import { Field } from 'redux-form';
    focusForm(){
        this.refs['qaQuery'].getRenderedComponent().focus();
    }

    <Field
        onClick={() => this.showMessage()}
        placeholder={this.props.placeholderText}
        ref="qaQuery"
        className="form-control"
        type="text"
        component="input"
        name={"inputField"}
        id={this.props.name}
    />
    <Button onClick={() => focusForm()}

Focus redux-form element onClick of button

1 Answers1