使用react在語義UI中編輯和刪除卡。

Question

我正在嘗試向卡添加用戶功能。 我已經創建了卡，希望用戶能夠編輯卡中的數據並根據需要完全刪除卡。

刪除應類似於使用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

如果sampleUsers如何存儲sampleUsers ，很難回答，但是基本上，您需要向Delete按鈕添加一個點擊處理程序，從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>
   )
 }

更新正如評論員指出的那樣，您可能需要查看一個語義React包裝器庫。 它並沒有真正解決您的問題，但是很好地傳遞了https://react.semantic-ui.com

Answer 2

首先，通過semantic-ui https://react.semantic-ui.com/introduction對React提供了本機支持，因此我建議您使用它。

其次，我為您創建了一個沙盒

實時取景： https : //n43z9w3o0.codesandbox.io/