Получить дочерние реквизиты onClick в родительском компоненте

64
9

У меня есть родительский компонент ButtonGroup и дочерний buttonItem:

//ButtonGroup Component (Parent)

clicky(){
//capture the props of the clicked button, ie, caption and disabled here.
}
render() {
return (
<div onClick={this.clicky}>
{this.props.children}
</div>
)
}

//buttonItem component:

render() {
return (
<button disabled={this.props.disabled}>{this.props.caption}</button>
)
}

//final render
<ButtonGroupComponent>
<buttonItem caption="Nothing"/>
<buttonItem caption="Something" disabled={true}/>
<buttonItem caption="Refresh"/>
</ButtonGroupComponent>

из приведенного выше кода есть ли какой-либо способ захватить реквизит buttonItem дочернего buttonItem?

спросил(а) 2021-01-25T14:07:06+03:00 4 месяца, 3 недели назад
1
Решение
88

В вашем случае вам необходимо объединить this.props.children с вашей пользовательской опорой. Поэтому я предлагаю вам использовать React.Children для работы с ним. Кстати, после добавления новой опоры вам нужно вернуть этого ребенка, поэтому cloneElement поможет вам в этом.

Внутри раздела импорта ButtonGroupComponent:

import React, { Children, Component, cloneElement } from 'react';

Его функция рендеринга будет выглядеть так:

render() {  
const childrenWithCustomHandler = Children.map(this.props.children, itemChild => {
// Arguments of cloneElement (component, [customProps], [customChildren])
return cloneElement(itemChild, { onClickItem: this.clicky })
}
);

return <div>{childrenWithCustomHandler}</div>;
}

И код компонента buttonItem будет выглядеть так:

 return (
<button
disabled={this.props.disabled}
onClick={() => {
this.props.onClickItem({ ...this.props });
}}
>
{this.props.caption}
</button>
)

Я использовал оператор Spread для клонирования объекта, поэтому, если вы захотите изменить реквизиты в своей функции clicky, ребенок не будет отображаться.

ответил(а) 2021-01-25T14:07:06+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема