Witajcie. W moim testowym projekcie będę miał kilkanaście/kilkadziesiąt przycisków, wszystkie są generowane z kolekcji własności, gdzie każda jest przypisana do odpowiedniego pola, po kilka na raz. Poniżej przykład:
export const pola= [
{
id: uuid.v4(),
p: 'pole1',
r: [
'previous',
'btn1-1',
'btn1-2',
'btn1-3',
'btn1-4'
]
},
{
id: uuid.v4(),
p: 'pole2',
r: [
'previous',
'btn2-1',
'btn2-2',
'btn2-3'
]
},
{
id: uuid.v4(),
p: 'pole3',
r: [
'previous',
'btn3-1',
'btn3-2'
]
},
{
id: uuid.v4(),
p: 'pole4',
r: [
'previous',
'btn4-1',
'btn4-2'
]
}
]
Z każdego pola mapowane są przyciski:
render() {
var fieldList= pola.map(klik=> {
return (
klik.r.map(value => {
return (
<div>
<button
value={value}
onClick={this.onButtonClick}>
{value}
</button>
</div>
);
})
);
});
Chcę, aby onButtonClick
dla każdego przycisku wyświetlał wybrane pole. Na przykład, po wciśnięciu btn4-1
będzie wyświetlone pole {pola[5].p}
wraz z jego przyciskami.
Chcę uniknąć korzystania z dziesiątków if
-ów, ale nie mam pomysłu na stworzenie generycznego warunkowania. Jedyne co mi na razie przychodzi do głowy to stworzenie tablicy 2D zawierającej btnx-x, pola[x]
itd. Może będziecie mieli lepszy pomysł w co uzbroić onButtonClick
? Zaczynam dopiero z React i JS, stąd moja konsternacja.