0

У меня есть множество компоентов в 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 с передачей параметра.

1 ответ 1

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

Пример

2
  • Да, это сработало, спасибо. Но мне на будущее, была ли возможность сделать то же самое, но передачу параметра в onClickHandler произвести при инициализации компонента Card?
    – Coretex
    10 ноя 2020 в 17:45
  • 1
    Как правило всегда все методы которые влияют на отображение выносят в родительский компонент. А в дочерние передают уже ссылки на этот метод. Если надо передать значение, а с ним работать в дочернем компоненте, то просто передавайте его через пропс и используйте уже в методах дочернего компоненат.
    – Lukas
    10 ноя 2020 в 18:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.