How can I trigger a click event for a React component using his id?

Question

I have a react component and I want to know how can I trigger a click event on it by clicking an image in my case. I tried with React's useRef(), but it doesn't work. Any idea how can I do this ? My code is bellow

import { SingleDatePicker } from 'react-dates'; <SingleDatePicker date={dateEnd} onDateChange={dateEnd => handleDateEnd( dateEnd )} focused={this.state.focusedEnd} onFocusChange={({ focused }) => this.setState({ focusedEnd : focused })} id="dateEndSearchBar" /> <img src={calendarIcon} onClick={//here I want to trigger the click on SingleDatePicker} />

Your component(SingleDatePicker) has the onClick event itself? — Majid M.
– Majid M., Commented Jun 6, 2021 at 8:45
So, what do you want to do with SelectDatePicker when img clicked? — Majid M.
– Majid M., Commented Jun 6, 2021 at 8:53
I want, when the img is clicked to happen the same thing as if I would click on the SelectDatePicker — Bogos Robert
– Bogos Robert, Commented Jun 6, 2021 at 8:56
You can add a new state to your states. So on img click event change the state and when the state change and your component render again, you have your new state and you can do everything you want with that. — Majid M.
– Majid M., Commented Jun 6, 2021 at 9:11

Majid M. · Accepted Answer · 2021-06-07 05:35:42Z

1

You can use onFocusChange prop in SingleDatePicker based on this link:

http://github.com/airbnb/react-dates/issues/639

answered Jun 7, 2021 at 5:35

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SuspenseFallback · Accepted Answer · 2021-06-06 08:51:18Z

you could set a class for the component in state and modify it on the img's onClick

Collectives™ on Stack Overflow

How can I trigger a click event for a React component using his id?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related