带有保存和取消按钮的 React.js 手风琴答案

【问题标题】：React.js accordion with save and cancel buttons带有保存和取消按钮的 React.js 手风琴
【发布时间】：2019-07-21 17:27:31
【问题描述】：

我是 React.js 的新手，我想构建一个如下图所示的 jsx 页面。单击顶部的每个项目都会有一个向下滑动的部分，并有一个保存和取消按钮。不同类别的每个部分中的表单将有相同的字段我不知道如何开始这个？有没有人这样做过？一些方向将不胜感激。

【问题讨论】：

【解决方案1】：

我认为您所要求的解决方案必须有很多代码可以在这里发布，但只需谷歌一下，您会发现很多关于如何实现这一点的示例。

很抱歉，如果我没有针对您的问题发布您的理想答案，但如果您花更多时间学习如何在 React.js 中编写此代码，而不是仅仅寻求解决方案，您会发现效率更高。

这里有一些链接：

祝你好运！

【讨论】：

我已经看到了您发布的所有链接，但它没有回答我的问题。如果我知道该怎么做，我就不会在这里发布问题。我只是在寻找想法，而不是要求任何人为我发布代码。我知道这将是很多代码。只是一些方向而已。尤其是保存和取消按钮。
好的。如果您想关注表单内的save 和cancel 按钮，那么您必须编写Accordion 组件以及包含表单字段和所需按钮的组件之后。之后，您必须在手风琴的内容部分中使用这些组件。
所以你是说让项目有 1 到 4 个不同的组件，即（总共 4 个组件）。每个组件都有自己的表单，包括保存和取消按钮，然后在手风琴中包含所有 4 个组件？
这取决于，如果这4个组件具有相同的元素，或者只是小块变化，更好的想法是实现一个组件，并通过props传递更改的数据或设计一种机制显示每个案例的具体数据。问题是 4 个手风琴有一个带有保存取消按钮的表单，所以这是 4 个手风琴之间的共同部分。