React Js 多个按钮

Question

我有一个反应代码，我需要两个按钮来提供不同的 paragraphs.when 单击每个按钮，应显示一组说明。我不明白该怎么做。到目前为止，这是我尝试过的。

import React from 'react';
function Unilevel(){
    const inst='here are the uni instructions ';

    return <h1>{inst}</h1>;
}
function Scllevel(){
  return <h1>'school instruction'</h1>  
}




class Instruction extends React.Component{
    render(){
        return(
        <div>
            <button onClick={Unilevel}> Uni Instruction</button>
            <button onClick={Scllevel}> School Instruction</button>
        </div>

        );
    }
}
export default Instruction;

我是网络应用程序设计和反应的新手。所以我想要一些指导。

Answer 1

这实际上取决于您希望如何显示这些文本，现在它真的很模糊，因为要查看的方法太多了。我可以推荐一个 youtube link ，我上周刚用它来学习 React，我发现它非常有用。你可以沿着条件渲染的方向搜索，甚至可以从 react bootstrap

中搜索 toast 消息或组件

React js tutorial

Answer 2

看看这个

class Instruction extends React.Component{
        constructor(props){
           state = {
              paragraph: ""
           }
        }

        changeInstruct=(TYPE)=>{
          let inst = ""
          switch(TYPE){
            case "UNI":{
              inst = "here are the uni instructions"
              break;             
            }
            case "SCH_LVL":{
              inst = "school instruction"
              break; 
            }  
            default:{}
          }
        this.setState({paragraph: inst})
        }

        render(){
            return(
            <div>
                <h1>{this.state.paragraph}</h1>
                <button onClick={()=>this.changeInstruct("UNI")}> Uni Instruction</button>
                <button onClick={()=>this.changeInstruct("SCH_LVL")}> School Instruction</button>
            </div>

            );
        }
    }
    export default Instruction;

Answer 3

试试这个。状态中存储的属性 'content'显示在h1标签中。当它的值改变时它会被刷新。单击按钮时，属性 'content' 会更新。

class Instruction extends React.Component {

    state = {
        content: ''
    }

    Unilevel = () => {
        this.setState({ content: 'here are the uni instructions ' });
    };

    Scllevel = () => {
        this.setState({ content: 'school instruction' });
    };

    render() {
        return (
            <>
                <div>
                    <button onClick={this.Unilevel}> Uni Instruction</button>
                    <button onClick={this.Scllevel}> School Instruction</button>
                </div>
                <h1>{this.state.content}</h1>
            </>
        );
    }
}

React Js 多个按钮

React Js multiple buttons

frontend

web-applications

reactjs