使用react在语义UI中编辑和删除卡片. [英] Editing and deleting a card in semantic UI using react.

问题描述

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

I'm trying to add user functionality to my cards. I have already created the cards and would like the user to be able to edit the data inside the card and delete the card entirely if they wish.

删除应该看起来像这样使用jquery删除卡的示例.我是新来的人，擅长jquery.我想知道将代码转换为反应代码的步骤是什么.任何建议将不胜感激！

Deleting should look something like this example of deleting a card using jquery . I'm new to react and am good at jquery. I was wondering what the steps were to transform that code into react code. Any advice would be greatly appreciated!

<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>

推荐答案

在不了解您如何存储 sampleUsers 的情况下很难回答，但基本上，您需要向其中添加点击处理程序删除按钮，从 sampleUsers 中删除该项目，然后重新呈现.

It's a bit hard to answer without seeing how you are storing sampleUsers, but basically, you would want to add a click handler to the Delete button, remove the item from sampleUsers and then rerender.

这里是一种方法的想法，可以帮助您入门.我尚未测试过，但希望对您有所帮助！

Here is an idea of one way to go about it to get you started. I haven't tested it, but hope it helps!

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>
   )
 }

更新正如评论者所指出的那样，您可能需要查看一个语义React包装器库.它并没有真正解决您的问题，但是很好地传递了 https://react.semantic-ui.com

UPDATE As a commenter pointed out, there is a Semantic React wrapper library you might want to look at. It doesn't really address your question, but good to pass along https://react.semantic-ui.com

这篇关于使用react在语义UI中编辑和删除卡片.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！