Блог

Главная - Вопросы по программированию - Как передать значение в модальное с помощью React.js?

Как передать значение в модальное с помощью React.js?

#javascript #arrays #reactjs #json

Вопрос:

У меня есть таблица, которая возвращает данные после a .data.map().. , как показано ниже:

 {this.state.data.map((item, i) => { 
   return (div>
              <tr>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.symbol}</td>

И a <td> в том же <table> и <tr> выше, который отображает мой модальный код с приведенным ниже кодом:

 <td>
    <div>
        <a className="btn" href="#open-modal" title="More Details">👁</a>
        <div id="open-modal" className="modal-window">
        <div>
          <a href={url} title="Close" className="modal-close">❌</a>
          <div>Update Details</div>
            <label>{item.id}</label> //WHERE I WANT TO DISPLAY MY ID
        </div><a href={url}></a></div>
    </div>
</td>

Теперь, когда я хочу отобразить item.id каждую конкретную строку после открытия модального, она возвращает item.id только 1 элемент в массиве, а не фактический item.id .

Таким item.id образом, in <td> отличается от item.id in в модальном значении. Он продолжает возвращать одно и то же item.id для каждой строки, на которую я нажимаю. Как я могу сделать так, чтобы эти 2 значения имели одинаковое значение?

Комментарии:

1. вам нужно иметь одно состояние, в котором находится выбранный элемент . И используйте значение этого состояния внутри содержимого вашего модала . {this.state.selectedItem.id}

Ответ №1:

Модальная ссылка только на ваш последний идентификатор на момент его отображения

Я бы предложил, чтобы у вас было состояние для хранения id и визуализации, когда вы открываете свой модал.

Что-то вроде:

 const [selectedId, setSelectedId] = useState();

<td>
    <div>
        <a
          className="btn"
          onClick={() => setSelectedId(item.id)}
          href="#open-modal" title="More Details"
        >👁</a>
        <div id="open-modal" className="modal-window">
        <div>
          <a href={url} title="Close" className="modal-close">❌</a>
          <div>Update Details</div>
            <label>{selectedId}</label>
        </div><a href={url}></a></div>
    </div>
</td>

Хотя 👁 выглядит это устрашающе.

Метки: