Многократная кнопка с forEach, одновременно обращаясь к onClick, обрабатывает ReactJS

Question

У меня есть кнопка со свойствами label и onClick . У меня также есть массив со значением, которое мне нужно передать в свойства метки. Вот код:

render(){
{tabel_soal.forEach(function (item, index) {
                <RaisedButton
                    label={item}
                    onClick={this.handleTabelSoalClick}
                    primary={true}
                />
            })}
}

С массивом в следующей структуре:

tabel_soal ={"buttonName1","buttonName2","buttonName3"}

Но мне также нужно получить доступ к свойствам onClick , чтобы запустить следующую функцию:

handleTabelSoalClick = () =>{
    const {push} = this.props
    push(`/tabelsampel/getDetailTabel/`+this.state.tabel_soal)
}

Но в настоящее время он показал ошибку, что это не определено.

Где-то я не так сделал? Любая помощь будет оценена

Answer 1

Прежде всего, вы объявили не тот объект.

tabel_soal = {"buttonName1", "buttonName2", "buttonName3"}

Так и должно быть

 tabel_soal = {
     "buttonName1": { name: "buttonName1", id: 1 },
     "buttonName2": { name: "buttonName2", id: 2 },
     "buttonName3": { name: "buttonName3", id: 3 }
 }

или

 tabel_soal = {
     "buttonName1": "buttonName1",
     "buttonName2": "buttonName2",
     "buttonName3": "buttonName3"
 }

или

объявлен как массив, если вы хотите единственный ключ.

tabel_soal = ["buttonName1","buttonName2","buttonName3"]

Если вы используете первый тип объекта, вы можете сделать что-то вроде этого.

render(){
{tabel_soal.forEach(function (item, index) {
                <RaisedButton
                    label={item}
                    onClick={(e)=>this.handleTabelSoalClick(item)}
                    primary={true}
                />
            })}
}

И в обработчике события щелчка вы можете использовать это значение.

handleTabelSoalClick = (item) =>{
   .....(`/tabelsampel/getDetailTabel/`+ item.name)
   or
   .....(`/tabelsampel/getDetailTabel/`+ item.id)

}

Если вы используете второй тип объекта, вы можете сделать что-то вроде этого.

render(){
{tabel_soal.forEach(function (name, index) {
                <RaisedButton
                    label={name}
                    onClick={()=>this.handleTabelSoalClick(name)}
                    primary={true}
                />
            })}
}

И в обработчике события щелчка вы можете использовать это значение.

handleTabelSoalClick = (name) =>{
   .....(`/tabelsampel/getDetailTabel/`+ name)    
}

Если вы используете третий тип массива, вы можете сделать что-то вроде этого.

render(){
{tabel_soal.forEach(function (name, index) {
                <RaisedButton
                    label={name}
                    onClick={()=>this.handleTabelSoalClick(name,index)}
                    primary={true}
                />
            })}
}

И в обработчике события щелчка вы можете использовать это значение.

handleTabelSoalClick = (name,index) =>{
   .....(`/tabelsampel/getDetailTabel/`+ name)   
  or 
   .....(`/tabelsampel/getDetailTabel/`+ tabel_soal[index]) 

}

Answer 2

Чтобы получить кнопку, выполните следующие действия, и для ее нажатия или метки вы можете передать массив

<RaisedButton
label={tabel_soal}
onClick={()=>this.handleTabelSoalClick(tabel_soal)}
primary={true}
 />

и функция получит массив в параметре,

handleTabelSoalClick = (tabel_soal) =>{
    ...//what ever you need to do with the array.
}

---

Если вы хотите получить несколько кнопок вместо этого, вы можете использовать следующий код,

render(){
{tabel_soal.map((item, index) =><RaisedButton
                    label={item}
                    onClick={this.handleTabelSoalClick}
                    primary={true}
                />
       )}
}