单击按钮时在 React 中进行条件渲染 [英] Conditional Rendering in React on button click

问题描述

我想在按钮点击时有条件地渲染组件，我写了下面的代码，但它不起作用，当我点击漫画时，应该加载漫画组件，当我点击比赛按钮时，比赛组件应该被加载，有人能帮我解决这个问题吗下面是代码和CSS文件

class Head extends Component{构造函数(){极好的();this.state = {按钮 ID:空}this.setButton = this.setButton.bind(this);}设置按钮(ID){this.setState({buttonId: id});}使成为(){if(this.state.buttonId == 1){<漫画/>}否则如果(this.state.buttonId == 2){<比赛/>}别的 {<漫画/>}返回(<div><输入类名={this.state.buttonId === 1?button1 橙色":"button1"} onClick={() =>this.setButton(1)} value="漫画"type="button" ref="button"/><input className={this.state.buttonId === 2?button2 橙色":"button2"} onClick={() =>this.setButton(2)} value="比赛"ref="button1" type="button"/>

);}}导出默认头部；

 input[type="button"]{背景颜色:白色；}输入[type="button"].orange{背景颜色:橙色；}

解决方案

您没有返回组件，请尝试以下操作:

class Head extends Component{构造函数(){极好的();this.state = {按钮 ID:空}this.setButton = this.setButton.bind(this);}设置按钮(ID){this.setState({buttonId: id});}使成为(){返回(<div>{this.state.buttonId === 1 &&<漫画/>}{this.state.buttonId === 2 &&<比赛/>}{this.state.buttonId !== 1 &&this.state.buttonId !== 2 &&<漫画/>}<输入类名={this.state.buttonId === 1?button1 橙色":"button1"} onClick={() =>this.setButton(1)} value="漫画"type="button" ref="button"/><input className={this.state.buttonId === 2?button2 橙色":"button2"} onClick={() =>this.setButton(2)} value="比赛"ref="button1" type="button"/>

);}}导出默认头部；

I want to conditional render component on button click, I wrote the following code but it's not working, when I click on comic, the comic component should be loaded, and when I click on contest button, contest component should be loaded, Can someone help me through this Below are the code and the CSS file

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

解决方案

You are not returning your components, try the following:

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;

这篇关于单击按钮时在 React 中进行条件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！