Сосредоточить элемент редукс-формы на щелчке кнопки

Question

Я использую приведенный ниже код для генерации поля ввода, используя избыточную форму

    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()}

Я хочу сфокусировать поле на щелчке кнопки.как мы можем достичь этого.Я пробовал с нижеуказанными опциями:

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

Пожалуйста, помогите мне добиться этого, спасибо

Answer 1

Ниже мой ответ:

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()}