React JS - 在选项卡点击时清除子表单

Question

问题陈述：我有一个显示 React-Bootstrap 选项卡的父组件。 Tabs 组件中有 2 个选项卡，每个选项卡都有自己的状态。在父组件中切换标签时需要清除子组件的状态

例如我的父组件显示 "Search" 和 "Create" 选项卡。当我转到 "Create" 选项卡并执行创建功能时，创建选项卡会显示一些成功消息。现在，当我转到“搜索”选项卡并返回“创建”选项卡时，所有消息和输入字段仍显示我之前输入的值。但是，当我从 "Search" 选项卡返回时，我需要清除 "Create" 选项卡的状态。

示例代码：

<Tab eventKey="search" title="Search">
            <Search />
          </Tab>
          <Tab eventKey="create" title="Create">
            <Create />
          </Tab>

是否有可用于清除子组件状态的 React 生命周期方法？

Answer 1

Tabs 接受布尔属性 unmountOnExit。重新进入时应该重新实例化 <Create /> 组件，有效地重置其内部状态。

<Tabs unmountOnExit />
  <Tab eventKey="search" title="Search">
    <Search />
  </Tab>
  <Tab eventKey="create" title="Create">
    <Create />
</Tab>

Answer 2

在react中，componentDidMount()或componentWillMount()只会被调用一次，构造函数也一样，只要状态发生变化，render()就会被一次又一次地调用。这是默认的生命周期或反应组件。

但是你可以通过传递一个不同的 key 属性来强制 React 组件重新启动它的生命周期，这会让 React 认为它是一个新组件。

做这样的事情：

<Create key = {"somekey" + Math.random() * 100} />

再多一招，方法很多。

Answer 3

不是很清楚。根据我的理解，组件和组件都在任何时候呈现。因此，当您在选项卡之间切换时，组件不会被卸载。并且由于其 parent 组件的状态没有变化，因此不会导致 re-render。生命周期方法无法帮助您。

修复它的一种方法是这样的。在两个选项卡的 parent 组件内，保持 eventKey 处于状态。将函数传递给两个选项卡以切换它。并有条件地呈现其中一个选项卡。 parent 的渲染将是这样的：

render() {
this.state.eventKey === "search" ? (<Tab eventKey="search" title="Search">
        <Search />
      </Tab>): <Tab eventKey="create" title="Create">
        <Create />
      </Tab>
}

希望对您有所帮助！

@hackape 的解决方案是基于您使用的组件库的最准确的解决方案。试试看。它应该可以解决问题

React JS - 在选项卡点击时清除子表单

React JS - Clear child forms on Tab clicks

tabs

reactjs

react-bootstrap