无法在 React Bootstrap 的选项卡中使用表单

Posted 2023-02-22

【中文标题】无法在 React Bootstrap 的选项卡中使用表单

【英文标题】：Unable to use Form inside tabs in ReactBootstrap

【发布时间】：2020-10-05 23:19:51

【问题描述】：

render()
return(<div>
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Form>  
<Tab eventKey="home" title="Home">
    <input type="text" name="name"/>
  </Tabs>
  <Tab eventKey="profile" title="Profile">
    <input type="text" name="age"/>
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <button type="submit">Submit</button>
  </Tab>
</Form>
</Tabs></div>);

无法在 ReactBootstrap 的选项卡中使用表单。 Tab 组件不应该被渲染！它是一个抽象组件，仅作为Tabs 组件的直接子组件有效。对于自定义选项卡组件，直接使用 TabPane 和 TabsContainer。这对我来说非常重要。我需要以不同形式划分的整个表格谢谢

【问题讨论】：

你试过用

是的。我只试过这样。我需要在单独的选项卡中单独输入表单

我问过你有没有把表格放在标签上面。在您的示例中，表单位于选项卡内。因此，将

之间，这样就可以了。

【参考方案1】：

您的结束标记中有错字。也许这会导致错误：

<Tab eventKey="home" title="Home">
    <input type="text" name="name"/>
</Tabs>

【参考方案2】：

你应该在 Tabs 组件中有 Tab。

请找到关于如何使用选项卡和选项卡的示例输出的屏幕截图。

【讨论】：

亲爱的先生，我仍然遇到同样的错误。我只想在所有选项卡中呈现一个表单

我想了解这里的用例。您希望一个表单显示在所有选项卡中吗？

希望这会有所帮助。 codesandbox.io/s/stoic-microservice-ru9v1?file=/src/App.js

尊敬的先生，不是这样 但是一个表单应该在所有选项卡中呈现。在我的一段代码中，一个输入框在第一个选项卡中，另一个输入框在第二个选项卡中，提交按钮在第三个选项卡中，并且在该表单标签关闭之后。我想要那样