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

Question

我正在尝试将用户功能添加到我的卡片中。我已经创建了卡片，并希望用户能够编辑卡片内的数据并在他们愿意的情况下完全删除卡片。

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

<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 https://react.semantic-ui.com/introduction 对 React 有原生支持，所以我建议你使用它。

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

实时取景：https://n43z9w3o0.codesandbox.io/

Answer 2

如果不了解您是如何存储 sampleUsers 的，这有点难以回答，但基本上，您会希望向“删除”按钮添加一个点击处理程序，从 sampleUsers 中删除该项目，然后重新渲染。

这里有一种方法可以帮助您入门。我还没有测试过，但希望对你有帮助！

class Users extends React.Component {
  constructor() {
    super();
    this.state = {
      sampleUsers: [
        {
          id: 1,
          name: 'John',
          description: 'A nice guy'
        },
        {
          id: 2,
          name: 'Jane',
          description: 'A nice gal'
        }
     ]
   }
 }

 handleDeleteUser: (id) => {
   const sampleUsers = this.state.sampleUsers.filter(user => user.id !== id)
   this.setState({ sampleUsers });
 }

 render() {
   return (
     <div class="ui cards">

      {
        this.state.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"
                    onClick={() => this.handleDeleteUser(user.id)}
                  >
                    Delete
                  </div>
                </div>
              </div>
            </div>
          </div>

        )
      }
    </div>
   )
 }

更新 正如评论者指出的那样，您可能想查看一个 Semantic React 包装器库。它并没有真正解决您的问题，但很高兴传递https://react.semantic-ui.com