How to manually trigger a click event on a dom in reactjs

Question

I want to manually trigger a onclick event on a input element. I did some search and wrote the code as below.

<input type="date" ref={datePicker => this.datePicker = datePicker}/>
            <button
                    onClick={(e) => {
                      this.datePicker.click()
                    }}>
             Select the data
            </button>

Then I also tried below code:

<input type="date" ref='datePicker'/>
                <button
                        onClick={(e) => {
                          this.refs.datePicker.click()
                        }}>
                 Select the data
                </button>

None of above code works. When I click the button , nothing happens. I expect to open the data picker ui.

Answer 1

I tried both your examples, and the <input> element's .click() method is indeed called. The reason it's not working as you expect is that it the click only puts the keyboard focus in the element, it does not click the date picker. Opening the date picker programmatically is currently not possible, at least not in all browsers.

Answer 2

Try without calling it as a function:

onClick={(e) => {this.datePicker.click}}>