用Onclick打开组件

Question

我需要打开一个组件时，我点击一个打赌的名称，但当我做什么都没有发生。我不知道我还需要什么才能成功，希望有人能帮我。

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

在我的呈现方法中使用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>
                );
            });
        }

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

Answer 1

您从onClick处理程序返回的内容将不会呈现。您需要以这样的方式更新组件状态，以便在单击组件后为特定的赌注呈现组件时，可以派生组件。

其中一种方法是将一个名为isClicked的新属性添加到WagerTypes数组中的每个对赌对象中，并在单击时在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>
        ))}
      </>
    );
  }
}