Javascript 用Onclick打开组件

我需要打开一个组件，当我点击一个赌注名称，但当我做什么都没有发生。我不知道我还需要什么来让它工作，希望有人能帮助我

wagerSwitch(param) {
        switch(param) {
            case 'Win':
                return <WPS/>;
            case 'Place':
                return <WPS/>;
            case 'Show':
                return <WPS/>;
            case 'Exacta':
                return <Exacta/>;
            case 'Quinella':
                return <Quinella/>;
            case 'Trifecta':
                return <Trifecta/>;
            case 'Superfecta':
                return <Superfecta/>;
            case 'Double1':
                return <Double/>;
            case 'FDouble2':
                return <Double/>;
            case 'Pick3-1':
                return <Pick3/>;
            case 'Pick3-3':
                return <Pick3/>;
            case 'Pick4-1':
                return <Pick4/>;
            case 'Pick4-4':
                return <Pick4/>;
            case 'Pick6-1':
                return <Pick6/>;
            case 'Pick6-6':
                return <Pick6/>;
            default:
                return <WPS/>;
        }
    }

wagerSwitch（参数）{
开关（参数）{
“胜利”案例：
返回；
案例“地点”：
返回；
案例“展示”：
返回；
“Exacta”案：
返回；
“奎内拉”案：
返回；
“三足鼎立”案：
返回；
案例“Superfecta”：
返回；
“Double 1”案例：
返回；
案例“FDouble2”：
返回；
案例“Pick3-1”：
返回；
案例“Pick3-3”：
返回；
案例“Pick4-1”：
返回；
案例“Pick4-4”：
返回；
案例“Pick6-1”：
返回；
案例“Pick6-6”：
返回；
违约：
返回；
}
}

在我的渲染方法中使用onclick的条件

const wagers = this.state.WagerTypes;
        const wagerList= [];

        if(wagers){
            wagers.forEach((wager) =>{
                wagerList.push(
                    <span className="label label-default" style={{cursor: 'pointer'}} key={wager['name']}onClick={() => this.wagerSwitch(wager.name)}>
                        {wager.name}
                    </span>
                );
            });
        }

const-wagers=this.state.WagerTypes；
const wagerList=[]；
如果（下注）{
赌注。外汇（（赌注）=>{
瓦格利斯特推(
this.wagerSwitch（wager.name）}>
{wager.name}
);
});
}

---

当我点击一个下注名称以显示每个下注的入口时，我需要打开该组件。您从

onClick

处理程序返回的内容将不会被呈现。您需要以这样一种方式更新组件状态，即您可以派生组件在被单击后是否应为特定下注而呈现

一种方法是向

WagerTypes

数组中的每个下注对象添加一个名为

isClicked

的新属性，并在单击时在true和false之间切换该属性

示例

class App extends React.Component {
  state = {
    WagerTypes: [
      /* ... */
    ]
  };

  wagerSwitch(param) {
    // ...
  }

  onClick = wager => {
    this.setState(({ WagerTypes }) => ({
      WagerTypes: WagerTypes.map(w =>
        w === wager ? { ...w, isClicked: !w.isClicked } : w
      )
    }));
  };

  render() {
    return (
      <>
        {this.state.WagerTypes.map(wager => (
          <span
            className="label label-default"
            style={{ cursor: "pointer" }}
            key={wager.name}
            onClick={() => this.onClick(wager)}
          >
            {wager.name}
            {wager.isClicked ? wagerSwitch(wager.name) : null}
          </span>
        ))}
      </>
    );
  }
}

类应用程序扩展了React.Component{
状态={
工资类型：[
/* ... */
]
};
投注开关（参数）{
// ...
}
onClick=下注=>{
this.setState（（{WagerTypes}）=>({
WagerTypes:WagerTypes.map（w=>
w===赌注？{…w，isClicked:！w.isClicked}:w
)
}));
};
render（）{
返回(
{this.state.WagerTypes.map（wager=>(
这个.onClick（下注）}
>
{wager.name}
{wager.isClicked？wagerSwitch（wager.name）：null}
))}
);
}
}

不会呈现从

onClick

处理程序返回的内容。您需要以这样一种方式更新组件状态，即您可以导出在单击某个组件后，该组件是否应为特定下注而呈现。您可以举个例子。。。请不要添加isClicked属性，因为我正在从API@JoseCarlosRodriguezArrieta您可以在将API数据置于状态之前添加它

this.setState（{WagerTypes:response.data.map（w=>（{…w，isClicked:false}））