React добавить дочерней компоненте onClick

16 апреля 2022, 14:50

У меня есть множество компоентов в dropdown списке. Надо чтобы при нажатии на любой из элементов списка, происходило конкретное действие.

Если я делаю так:

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 с передачей параметра.

Answer 1

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>;
}

Пример