Question

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

我正在考虑将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; tab事件需要传递给子组件

Answer 1

通常，当您需要从父调用子处理程序时，您应该知道您的心态有点不对。在React中，父母不应该一般需要从子道具中调用任何东西。

如果您要构建标签系统，我会在开关上安装/卸载Tab 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>
    );
  }
}

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

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

从家长呼叫儿童事件

1 个答案: