Javascript 从父级调用子事件

在父组件允许切换选项卡之前，我希望子选项卡能够自我验证

我正在考虑将onActive事件从父对象传递给它的子对象，

和

这将允许孩子们验证自己，并在切换选项卡之前执行他们需要执行的任何操作

我不确定语法会是什么样子。我相信我需要把这件事传给孩子。这个概念有意义吗？我的代码肯定没有。我们怎样才能让这一切继续下去

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

类ParentC扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 值：“0”， }; this.handleActive=this.handleActive.bind（this）； } render（）{ 返回( ) } }

---

tldr；tab事件需要传递给子组件一般来说，当您需要从父级调用子处理程序时，您应该知道您的思维方式有点错误。在React中，家长通常不应该需要从孩子的道具中调用任何东西

如果您正在构建一个选项卡系统，我会在开关上安装/卸载

选项卡

s，并使用

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

类选项卡扩展组件{
componentDidMount（）{
//在这里做事
}
组件将卸载（）{
// ...
}
render（）{
返回(
{this.props.title}
);
}
}
类选项卡视图扩展组件{
状态={
活动选项卡：0，
};
onActiveTabChange（idx）{
this.setState（{activeTab:idx}）；
}
render（）{
返回(
{React.Children.map（（c，idx）=>(
{c.props.title}
))}
{React.Children.map（Children，（child，idx）=>{
if（idx==this.state.activeTab）{
返回儿童；
}
返回null；
})}
);
}
}

注意我的例子不太详细。我只是想给你一个想法，因为实施取决于你的确切需求

---

这是我通常这样构造组件的方式。

感谢您以后的想法。但Tab是一个重要的ui组件。对不起，我没说清楚。我宁愿只听从组件触发的事件