How to focus input date field in react?

Question

Could you please tell me How to focus input date field in react?I am using a plugin of semantic https://www.npmjs.com/package/semantic-ui-calendar-react

I want to focus date input field on button click here is my code. here is my code https://codesandbox.io/s/3l414mno5

focus = () => {
    console.log(this.a);
    this.a[0].onFocus();
    // this.inputRef.focus()
  };

the focus is not coming in input field why? any update ?

Answer 1

To enable a focus on button click, you need to set a ref like this :

    this.logButton = React.createRef();
    ref={this.logButton}

and access it in button click like below:

focus = e => {
    this.logButton.current.openPopup();
};

openPopup() - is a fucntion to open the calendar popup, the plugin your using, has code like this, check here

demo and In multiple data fields, use dynamic refs. Hope it helps.