React: Как отобразить модальное всплывающее окно только для этого конкретного div

Question

Чтобы было понятнее, в основном то, что я пытаюсь сделать, это как Amazon

Будет несколько продуктов, и после того, как вы нажмете на этот продукт, только всплывающее окно будет отображать только этот продукт и его детали.

В моем случае, я сохранил 3 данных в массиве, я наметил их, что создает 3div и 3Modal Popup с кнопками в каждом.

Как только я нажму на кнопку 1-го деления, я хочу, чтобы модал был открыт только для этого первого деления.

Но прямо сейчас, когда я нажимаю на кнопку все 3 Modal Popup.

Я новичок в React, я могу делать то же самое в JQuery и Javascript, но я не могу добиться этого в React.

Или есть лучший подход к этому? Нравится, а не зацикливание и создание 3-модального всплывающего окна. Можем ли мы создать только одно модальное всплывающее окно, которое будет отображать данные о конкретном элементе div, по какой кнопке нажимается?

Мой текущий код:

App.js, где я создал массив

Product.Js, где он отображается в 3div, а также имеет модальное всплывающее окно

Дайте мне знать, если вам, ребята, нужна более подробная информация

Спасибо, ребята.

3 Div, который создается с помощью данных из массива

Но когда я нажимаю на любую кнопку, всплывающее окно для всех div появляется, вот в чем проблема

Answer 1

Конечно, все модальные окна будут появляться одновременно. Все модальные используют одно и то же состояние, которое this.state.showModal. Как только он получит true, тогда все просто всплывет. Если вам все еще нравится иметь 3 модальных типа. Я предлагаю вам установить значение showModal состояние со значением JSON. Может быть, что-то вроде этого:

state = {
    showModal: {}
}

затем для getModal() функция:

getModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = true;
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

Тогда для <Modal/> должно выглядеть так:

<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>

Чтобы скрыть модал, вы можете сделать противоположное getModal() следующим образом:

hideModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = false;//Just different on this
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

Если вы все еще заинтересованы и у вас есть проблемы с его реализацией, я могу помочь вам создать рабочую демонстрацию. Поскольку я на самом деле не тестирую код, просто сделайте его на основе моего опыта и быстрого анализа. Тем не менее, лично мне нравится иметь один модал для такого рода дел. Просто установите одно «состояние» «Детали продукта», затем прочитайте это «состояние» из одного модального элемента и одновременно покажите его.

==== ДЕМО: ТЕХНОЛОГИЯ НЕСКОЛЬКИХ МОДАЛЬНЫХ ЭЛЕМЕНТОВ =====

Так же, как ваш комментарий, потому что вам нужно показывать только один модальный за раз, тогда это будет намного проще. Нам не нужно иметь несколько истинных / ложных условий, как указано выше. Мы можем просто использовать data.id в качестве проверки истинности / ложности для состояния showModal, например:

class Product extends Component {
  state = {
    showModal: 0
  };

  getModal = value => {
    this.setState({ showModal: value });
  };

  hideModal = value => {
    this.setState({ showModal: 0 });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data.id)}>Popup</button>

            <Modal
              show={this.state.showModal === data.id}
              onHide={() => this.hideModal(data.id)}
              name={data.name}
            />
          </div>
        ))}
      </div>
    );
  }
}

Рабочая демоверсия: https://codesandbox.io/s/pkjvy72mw0

=== ДЕМО: МЕТОДИКА ОДНОГО МОДАЛЬНОГО ЭЛЕМЕНТА ===

Вы также можете иметь только один элемент <Modal/>, как показано ниже:

class Product extends Component {
  state = {
    showModal: false,
    dataModal: {
      name: ""
    }
  };

  getModal = data => {
    this.setState({ showModal: true, dataModal: data });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data)}>Popup</button>
          </div>
        ))}

        <Modal
          show={this.state.showModal}
          onHide={this.hideModal}
          name={this.state.dataModal.name}
        />
      </div>
    );
  }
}

Рабочая демоверсия: https://codesandbox.io/s/53x7m726xk