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

要获取按钮，请执行以下操作及其onclick或标签，您可以传递数组

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

该函数将在param中接收数组，

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}
                />
       )}
}

Answer 2

首先，您声明了错误的对象。

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]) 

}

具有forEach的多个按钮，同时还具有onClick句柄ReactJS

2 个答案: