React / preact OnClick <td>визуализировать таблицу с деталями - PullRequest
Новая
       13

React / preact OnClick <td>визуализировать таблицу с деталями

0 голосов
/ 06 декабря 2018

У меня есть таблица, в которой при нажатии на тэд-тег, который является плюсовой кнопкой, в нем должны отображаться сведения об этой строке.Примерно так:

enter image description here

Сейчас я просто тестирую это так: 

props.info.map((l, i) => {
                    return (
                        <tr>
                            <td>{i + 1}</td>
                            <td>{l.UserId}</td>
                            <td onClick={props.onShowInfoDetails}> 
                             <MenuPlusButton /></td>
                            {props.showInfoDetails && (
                        <DetailsTable />
                        )
                        }
                        </tr>
                    )
                })

, где есть DetailsTableя хочу сделать onClick 

export const DetailsTable = (props: Props) => {
return (
<tr>
    <td>Hello</td>
</tr>
)

}

Есть две проблемы с этим.Сначала DetailsTable отображается справа от остального содержимого, а не под ним, как на картинке.Вторая проблема заключается в том, что когда я нажимаю на нее, все строки таблицы показывают привет, а не только ту, на которую я нажал.И то и другое я не могу понять.Вторая проблема, которую я предполагаю, заключается в том, что, если в сообщении указано, что props.showEntryDetails имеет значение true, он отображает DetailsTable, а onClick устанавливает его в значение true, но как мне сделать так, чтобы оно действовало только для той строки, которую я щелкнул?

...