React useRef and click event passing extra param

Question

Is it possible to send extra params with a click event via a useRef.

const button = useRef(null)

const handleSelectSearchResult = (query, type, extra) => {
    dispatch(search.setSearchQuery(query, type));
    extra && handleFocusWhere();
};


<div ref={button} onClick={() => handleSelectSearchResult(name, category)}>

I want to pass the extra param if it is programatically clicked rather than mouse or enter.

button.current.click(send some extra params);

Answer 1

You can use event.isTrusted property to differentiate between clicks from the browser or the user triggered in the event triggered by onClick. event.isTrusted is false if the event is from programmatically. I don't think you can pass parameters from button.click()

Answer 2

An alternative approach for what you want to achieve could be currying your function. Which essentially transforms it into a function that returns another function (a creator function if you will).

const handleSelectSearchResult = isClick => (query, type) => {
    dispatch(search.setSearchQuery(query, type));
    isClick && handleFocusWhere();
};

const handleClickSelectSearchResult = handleSelectSearchResult(true)
const handleEnterSelectSearchResult = handleSelectSearchResult(false)


<div ref={button} onClick={() => handleClickSelectSearchResult(name, category)}>

<OtherComponent onEnter={() => handleEnterSelectSearchResult(name, category)}>