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.

@Ro If reactjs supports this I don't want to bring another dependency into my application — Joey Yi Zhao, Dec 15 '16 at 01:10
@CodeBling The datePicker is defined in the tag. I want to show the date picker triggered by the input tag. — Joey Yi Zhao, Dec 15 '16 at 01:11
@CodeBling It is already there. Look at the first line of my code. The tag has a property ref which point to datePicker. — Joey Yi Zhao, Dec 15 '16 at 01:38

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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.

edited May 23 '17 at 11:45

Community

1
1

answered Dec 15 '16 at 03:21

Codebling

10,764
2
38
66

Is there any way for me to customize the ui? – Joey Yi Zhao Dec 15 '16 at 03:23
See http://stackoverflow.com/a/15531938/675721. I think you can make minor adjustments, but not really. See also https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker – Codebling Dec 15 '16 at 05:14

score 0 · Answer 2 · answered Dec 15 '16 at 00:33

0

Try without calling it as a function:

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

answered Dec 15 '16 at 00:33

Vinnie James

5,763
6
43
52

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

2 Answers2