主页 / 问题 / 1202717
Accepted
Coretex
Asked:2021-11-10 22:18:46 +0000 UTC2021-11-10 22:18:46 +0000 UTC

React 添加子组件 onClick

  • 772

我在下拉列表中有很多组件。当您单击列表中的任何元素时，必须执行特定操作。

如果我这样做：

functiion filter() {
    return(
        <div className={`${styles.option_list} no_decorate`}>
            {Object.entries(selectedItem).map(region => {
                let test = 'test'
                return <Card key={uniqueKeyGenerator()} region={region[0]} selected={region[1]} onClick={(test) => console.log(test)} />
            }
            )}
        </div>
    )
}

function Card({ region, selected = false }) {
    return (
        <div className={`${styles.option} ${selected ? styles.selected : ''}`}>
            {region}
        </div>
    )
}

控制台中不显示任何内容。如果我这样做：

functiion filter() {
    return(
        <div className={`${styles.option_list} no_decorate`}>
            {Object.entries(selectedItem).map(region => {
                let test = 'test'
                return <Card key={uniqueKeyGenerator()} region={region[0]} selected={region[1]} onClick={(test) => console.log(test)} />
            }
            )}
        </div>
    )
}

function Card({ region, selected = false, onClick }){
    return (
        <div onClick={onClick} className={`${styles.option} ${selected ? styles.selected : ''}`}>
            {region}
        </div>
    )
}

然后在控制台中显示：

在此处输入图像描述

问题- 我如何通过onClick参数传输来实现对事件的反应。

javascript

1 个回答

  1. Best Answer
    export default function App() {
  const onClickHandler = (value) => {
    console.log(value);
  };

  return <Card onClickHandler={onClickHandler} />;
}


export default function Card({ onClickHandler }) {
  return <button onClick={() => onClickHandler("test")}>Click me</button>;
}

    例子

    • 1

相关问题