Как добавить динамическую строку рядом с строкой, по которой щелкнули, с реакцией + избыточность? - PullRequest
0 голосов
/ 27 декабря 2018

Я создаю складную таблицу, когда пользователь нажимает на строку, детали извлекаются с помощью вызова API, и детали должны отображаться в виде новой таблицы ниже этой строки (как аккордеон).Повторное нажатие закрывает эту открытую строку, и это происходит для каждой строки (данные предоставляются по запросу).Может кто-нибудь предложить мне способ добиться этого с React + Redux

<tbody>
                {projectslist.map( i =>
                   [<tr key={Math.random()} id={'row_'+i.id} onClick={toggleDetail(i.id)}>
                        <td key={Math.random()} md={1} xs={1}>{i.name}</td>
                        <td className="totalCol" key={Math.random()} md={1} xs={1}>{i.value}</td>

                        {months.map(m => 
                            weeks.map(w => 
                                w == 1 ? [ <td colSpan="2">1/2</td>, <td key={Math.random()}>{calculateCells(w, m.format("M"), recordslist[i.name])}</td>]
                                : <td key={Math.random()}>{calculateCells(w, m.format("M"), recordslist[i.name])}</td>
                            )
                        )}
                   </tr>,
                   <tr id={'child_'+i.id} ref={'child_'+i.id} style={{display:'none'}}>Test

                   </tr>]
                )}
            </tbody>

1 Ответ

0 голосов
/ 27 декабря 2018
  1. Вы хотите сохранить в своем состоянии две вещи: состояние переключателей и данные, полученные с сервера.
  2. Создать действие ( асинхронное действие ) для извлеченияданные с сервера.Кроме того, действие должно переключать открытое состояние.
  3. Создать редуктор, который сохраняет результат извлечения в вашем состоянии
  4. В toggleDetail() вызовите ваше новое действие
  5. ИспользованиеmapStateToProps чтобы сопоставить состояние с вашими реквизитами.Используйте открытое состояние, чтобы определить, следует ли отображать строку открытой или закрытой.

Поскольку вы хотите реализовать аккордеон, и несколько строк могут быть открыты одновременно, я бы предложил следующую структуру данных для вашего состояния: (при условии, что данные - это данные, полученные с сервера): state.projects[data.id] = data.

Вместо двух состояний для каждой строки (открыто / закрыто) вы также можете ввести третье состояние loading, чтобы указать пользователям, чтоданные в настоящее время извлекаются с сервера.

...