React 模式有条件地渲染 Card 组件内的表单，并使用 Card.Footer 保存所有表单

Question

我有一个非常常见的 React Card 组件，我可以这样使用：

...
<Card>
    <Card.Title>
        ...
    </Card.Title>
    ...
    <Card.Footer>
        ...
    </Card.Footer>
</Card>
...

用“正常”组件填充它时效果很好。
但现在我想根据

tab

状态变量

(0, 1 or 2)

显示其中的组件，所以我这样使用它：

...
<Card>
    ...
    {
        tab === 0 ? <ComponentA /> : 
            tab === 1 ? <ComponentB /> :
                tab === 2 ? <ComponentC /> : 
                    null
    }
    <Card.Footer>
        ...
    </Card.Footer>
</Card>

问题在于

Components A

、

B

和

C

由具有各自

Save Changes

按钮和相关逻辑的表单组成。他们彼此独立，甚至与父母独立

Card

。

我希望这些

Save

按钮位于

Card.Footer

子组件内部。 也就是说，将保存按钮和行为“暴露”给父

Card

组件...

问题的出现是因为我认为这种模式对我来说似乎很常见（每个 UI 库都有一个

Card

组件，其中包含

Header

、

Footer

等等...

那么...我是否必须改变设计并重新思考结构？
解决这个问题的

React

方法是什么？

提前致谢。

Answer 1

无需更改组件的整体设计和结构即可实现您的需求。您可以使用

Card

管理父

useState

组件中的表单值，并将必要的状态和处理程序作为 props 传递给表单组件。具体方法如下：

分步解决方案

1. 在父组件中使用

   useState

   ：管理父组件中的表单值。
2. Pass State and Handlers to Form Components：通过 props 将状态和状态更新函数传递给表单组件。
3. 在页脚

   中调用

   handleSubmit：从页脚按钮调用适当的提交处理程序。

实施示例

1.定义您的表单组件

每个表单组件都会接收 state 和 setState 函数作为 props，并使用它们来管理表单数据。

const ComponentA = ({ formData, setFormData }) => {
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

  return (
    <div>
      <form>
        <input
          type="text"
          name="fieldA"
          value={formData.fieldA || ''}
          onChange={handleChange}
        />
      </form>
    </div>
  );
};

// ... ComponentB, ComponentC ...

export { ComponentA, ComponentB, ComponentC };

2.在您的应用程序中使用组件

在父组件中管理表单状态，并将state和setState函数传递给表单组件。

const App = () => {
  const [tab, setTab] = useState(0);
  const [formData, setFormData] = useState({});

  const TabHandlers = [
    {
      component: <ComponentA formData={formData} setFormData={setFormData} />,
      handleSubmit: () => {
        console.log('Saving Component A', formData);
        // Add your save logic for Component A here
      },
    },
    // ... ComponentB, ComponentC ...
  ];

  return (
    <Card>
      <Card.Title>My Card Title</Card.Title>
      {TabHandlers[tab].component}
      <Card.Footer onSubmit={TabHandlers[tab].handleSubmit} />
    </Card>
  );
};

export default App;

说明

1. 表单组件：每个表单组件接受

   formData

   和

   setFormData

   作为 props。它使用

   handleChange

   函数更新表单数据。
2. 父组件：父组件（

   App

   ）管理当前选项卡状态和表单数据。它通过

   TabHandlers

   数组将相关表单数据和处理程序传递给活动表单组件。

这种方法可以使您的表单组件及其逻辑保持井井有条，并允许

Card

组件有效地处理表单提交。