单击按钮时在React中进行条件渲染

小编典典

单击按钮时在React中进行条件渲染

reactjs

我想在按钮单击时使用条件渲染组件，我编写了以下代码，但不起作用，当我单击漫画时，应加载漫画组件，而当我单击竞赛按钮时，应加载竞赛组件，有人可以帮忙吗下面是代码和CSS文件

class Head extends Component{

    constructor(){

        super();

        this.state = {

         buttonId: null

        }

        this.setButton = this.setButton.bind(this);

      }

      setButton(id){

        this.setState({buttonId: id});

      }

    render(){

        if(this.state.buttonId == 1){

            <Comic/>

        }

        else if(this.state.buttonId == 2){

            <Contest/>

        }

        else {

            <Comic/>

        }

        return(

        <div>

             <input className={this.state.buttonId === 1? "button1 orange" :

              "button1"} onClick={() => this.setButton(1)} value="Comic"

               type="button" ref="button" />

            <input className={this.state.buttonId === 2? "button2 orange" :

            "button2"} onClick={() => this.setButton(2)}  value="Contest"

             ref="button1" type="button" />



         </div>

         );

       }

    }



export default Head;








      input[type="button"]{

    background-color: white;

  }

    input[type="button"].orange{

    background-color: orange;

  }

阅读 342

2020-07-22

共1个答案

小编典典

您不退还组件，请尝试以下操作：

class Head extends Component{
    constructor(){
        super();
        this.state = {
         buttonId: null
        }
        this.setButton = this.setButton.bind(this);
      }
      setButton(id){
        this.setState({buttonId: id});
      }
    render(){
        return(
        <div>
             {this.state.buttonId === 1 && <Comic/>}
             {this.state.buttonId === 2 && <Contest/>}
             {this.state.buttonId !== 1  && this.state.buttonId !== 2 && <Comic/>}
             <input className={this.state.buttonId === 1? "button1 orange" : 
              "button1"} onClick={() => this.setButton(1)} value="Comic" 
               type="button" ref="button" />
            <input className={this.state.buttonId === 2? "button2 orange" : 
            "button2"} onClick={() => this.setButton(2)}  value="Contest" 
             ref="button1" type="button" />

         </div>
         );
       }
    }

export default Head;

2020-07-22