javascript - 使用 React 在语义 UI 中编辑和删除卡片。

Question

我正在尝试向我的卡片添加用户功能。我已经创建了卡片，并希望用户能够编辑卡片内的数据，并根据需要完全删除卡片。

删除应该是这样的 example of deleting a card using jquery 。我是 React 新手，擅长 jquery。我想知道将该代码转换为 react 代码的步骤是什么。任何建议将不胜感激!

<div class="ui cards">

        {
          sampleUsers.map(user =>
            <div className = "card">
              <div className = "content">
                <div className = "header > {user.name} </div>
                <div className = "description"> 
                  {user.description}
                </div>

                <div clasName = "extra content">
                  <div className = "ui two buttons">
                    <div className = "ui basic green button">Edit</div>
                    <div className = "ui basic red button">Delete</div>
                  </div>
                </div>
              </div>
            </div>

          )
        }
</div>

Answer 1

首先，semantic-ui 对 React 提供 native 支持 https://react.semantic-ui.com/introduction所以我建议你使用它。

其次我为你创建了一个沙箱

实时查看:https://n43z9w3o0.codesandbox.io/