时间戳

首页 > 解决方案 > 使用 Onclick 打开组件

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

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

单击投注名称时需要打开组件以显示每个投注的条目

标签： javascriptreactjs

解决方案

您从onClick处理程序返回的内容将不会被渲染。您需要以这样一种方式更新组件状态，以便在单击组件后是否应为特定赌注渲染组件。

一种解决方法是向数组isClicked中的每个赌注对象添加一个名为 eg 的新属性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>
        ))}
      </>
    );
  }
}

推荐阅读