Редактирование и удаление карты в семантическом интерфейсе с использованием реагирования.

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

Сначала есть встроенная поддержка React semantic-ui https://react.semantic -ui.com / вводная информация , поэтому я бы посоветовал вам использовать ее.

Во-вторых, я создал песочницу для тебя

Просмотр в реальном времени: 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>
   )
 }

UPDATE Как отметил комментатор, есть библиотека-обертка Semantic React, на которую вы можете посмотреть. Это на самом деле не отвечает на ваш вопрос, но хорошо бы передать https://react.semantic -ui.com