如何将参数从 React 组件传递给事件

Question

I have this two files, WordList.js:

import React, { useEffect, useState } from 'react';
import WordListItem from "./WordListItem";

function WordList(props) {
    var cards = props.cards;
    var cardsElements = null;

    var [ id, setId ] = useState('');

    function contextMenuClickHandler(id) {
        setId(id);
        console.log(id);
    }

    useEffect(() => {
        document.addEventListener('click', function() {console.log(this)}.bind(id));
    }, []);

    if (cards != null) {
        cardsElements = cards.map( card =>
            <WordListItem
                value={card.original_word}
                key={ card.id }
                id={ card.id }
                visible={ card.id === id }
                contextMenuClickHandler={ contextMenuClickHandler }
            />
        );
    }

    return (
        <React.Fragment>
        <button onClick={ contextMenuClickHandler }>kek</button>
            { cardsElements }
        </React.Fragment>
    )
}

export default WordList

And WordListItem.js:

import React, { useState, useEffect } from 'react';
import './WordListItem.css';
import more from './more.svg';
import ContextMenu from './ContextMenu'

function WordListItem(props) {
    function contextMenuClickHandler(event) {
        props.contextMenuClickHandler(props.id);
    }

    return (
        <p className="word-list-item">
            { props.value }
            { props.visible ? <ContextMenu/> : null }
            <img src={ more } className="more-button" onClick={ contextMenuClickHandler } />
        </p>
    );
}

export default WordListItem;

First component - WordList is a list of WordListItem, and every WordListItem have ContextMenu component that displays when user clicks on img element. WordList stores id of WordListItem that must displays ContextMenu in concrete moment to have displayed only one ContextMenu in any time. To close this ContextMenu user must click to one of ContextMenu buttons. But i want that if user click in another space of document (any place) close ContextMenu too. In useEffect on WordList i add listener (with [] because document must have only one handler). I can pass parameter with id to documentClickHandler but parameter remains the same value after i update id. In answers people say me to write useEffect to update id. But how can i call useEffect?

Added.

i made this:

    useEffect(() => {
        document.addEventListener('click', function() {console.log(this())}.bind(test));
    }, []);

    function test() {
        return Math.random();
    }

it works, handler have new value ever click, but if i make this:

    function test() {
        return id;
    }

where id i get from his:

    var [ id, setId ] = useState('');

And with state id, it doesn't work. I must use useEffect but how must i do this?

Answer 1

When you set the dependency list of the useEffect hook as empty array, then the function someFunction will be called only on first render.

let the useEffect watch id and call the function whenever the id changes as following

useEffect(someFunction, [id])

And also call setId function whenever you want to change id

Answer 2

将 id 添加为 useEffect 的依赖项，这样单击事件侦听器将在 id 更改时更新：

useEffect(someFunction, [id]);