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

【问题标题】：How to pass parameter to event from React Component如何将参数从 React 组件传递给事件
【发布时间】：2023-03-03 01:36:01
【问题描述】：

我有这两个文件，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

还有 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;

第一个组件 - WordList 是 WordListItem 的列表，每个 WordListItem 都有 ContextMenu 组件，当用户单击 img 元素时会显示该组件。 WordList 存储必须在具体时刻显示 ContextMenu 的 WordListItem 的 id，以便在任何时候都只显示一个 ContextMenu。要关闭此 ContextMenu，用户必须单击 ContextMenu 按钮之一。但我希望如果用户单击文档的另一个空间（任何地方）也关闭 ContextMenu。在 WordList 上的 useEffect 中，我添加了侦听器（使用 [] 因为文档必须只有一个处理程序）。我可以将带有 id 的参数传递给 documentClickHandler，但在我更新 id 后参数保持不变。在答案中，人们说我写 useEffect 来更新 id。但是如何调用 useEffect 呢？

已添加。

我做了这个：

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

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

它有效，处理程序有新的价值点击，但如果我这样做：

    function test() {
        return id;
    }

我从他那里得到的 id：

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

而使用状态 ID，它不起作用。我必须使用 useEffect 但我该怎么做呢？

【问题讨论】：

如果您多次运行useEffect，请不要忘记删除之前的监听器。

标签： javascript reactjs

【解决方案1】：

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

useEffect(someFunction, [id]);

【讨论】：

【解决方案2】：

当你将useEffect hook的依赖列表设置为空数组时，函数someFunction只会在第一次渲染时被调用。

让 useEffect 监视 id 并在 id 发生如下变化时调用该函数

useEffect(someFunction, [id])

并且当你想改变id时也调用setId函数

【讨论】：