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

使用Onclick打开组件

1 个答案: