Вызов дочернего события от родителя
Прежде чем родительский компонент разрешит переключение вкладки, я хотел бы, чтобы дочерняя вкладка проверила себя.
Я думаю передать событие onActive от родителя к его потомкам, <ClientInfo/> and <Details/>.
Это позволит детям проверять себя и выполнять любые действия, которые им нужно сделать, прежде чем вкладка будет переключена.
Я не уверен, как будет выглядеть синтаксис. Я считаю, что мне нужно привязать событие, чтобы передать его ребенку. Есть ли в этой концепции смысл? Мой код уверен, что нет. Как мы могли добиться этого?
class ParentC extends Component {
constructor(props) {
super(props);
this.state = {
value: '0',
};
this.handleActive = this.handleActive.bind(this);
}
render(){
return(
<Tabs>
<Tab label = {<h6>Client Info</h6>} value = "0" onActive = {this.handleActive}>
<ClientInfo tabChange = {this.handleActive}/>
</Tab>
<Tab label = {<h6>Details</h6>} value = "1" onActive = {}>
<Details tabChange = {this.handleActive} />
</Tab>
</Tabs>
)
}
}
tldr; событие табуляции необходимо передать дочернему компоненту
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В общем, когда вам нужно вызвать дочерний обработчик от родителя, вы должны знать, что ваше мышление немного неверно. В React родители не должны в целом вызывать что-либо из свойств своих дочерних элементов.
Если вы создаете систему вкладок, я бы пошел с монтированием / размонтированием Tab на коммутаторе и использовал методы жизненного цикла componentDidMount и componentWillUnmount.
Однако, прочитав ваш вопрос еще раз, я не думаю, что вам нужны такие обратные вызовы. Вот что я предлагаю:
class Tab extends Component {
componentDidMount() {
// do stuff here
}
componentWillUnmount() {
// ...
}
render() {
return (
<div className = "tabTitle">{this.props.title}</div>
);
}
}
class TabbedView extends Component {
state = {
activeTab: 0,
};
onActiveTabChange(idx) {
this.setState({activeTab: idx});
}
render() {
return (
<div className = "tabs">
<div className = "tabButtons">
{React.Children.map((c, idx) => (
<button onClick = {this.onActiveTabChange(idx)}>
{c.props.title}
</button>
))}
</div>
<div className = "activeTab">
{React.Children.map(children, (child, idx) => {
if (idx === this.state.activeTab) {
return child;
}
return null;
})}
</div>
</div>
);
}
}
Примечание мой пример не очень подробный. Я просто хотел дать вам представление, поскольку реализация зависит от ваших конкретных потребностей.
Я обычно структурирую компоненты таким образом.
Спасибо за идею в будущем. Но Tab - это компонент материального интерфейса. Извините, я не дал этого ясно. Я лучше просто слушаю событие, которое запускается из компонента