第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

動(dòng)態(tài)渲染多個(gè)按鈕

動(dòng)態(tài)渲染多個(gè)按鈕

胡說(shuō)叔叔 2023-11-12 15:07:26
我是 React Js 的新手,我想構(gòu)建一個(gè)像鏈接一樣的多個(gè)按鈕。任何人都可以幫助我。理解語(yǔ)句和組件將非常有幫助。http://noxious-ornament.surge.sh/我嘗試寫(xiě)這樣的東西,但我不知道如何繼續(xù)。import React, { Component } from 'react'import './Ar.css';class Ar extends Component {    constructor() {        super();        this.state = {            buttonPressed: 0            // 0 could be your default view        }    }    handleClick = (button) => {        this.setState({ buttonPressed: button })    }    render() {        return(            <div>            <button                  className='button1'                  onClick={() => this.handleClick(1)}             > BUTTON 1             </button>                          <button                  className='button2'                  onClick={() => this.handleClick(1)}             > BUTTON 2             </button>             <button                  className='button2'                  onClick={() => this.handleClick(1)}             > BUTTON 3             </button>                }       </div>        )    }}export default Ar
查看完整描述

2 回答

?
慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是一個(gè)開(kāi)始。接下來(lái)我將添加react-router-dom,以便您可以加載該SomePage組件。


const {Component} = React;


function SomePage(props){

  return (

    <div>

      Button {props.value} has been pressed! 

      <button>back</button>

    </div>

  )

};


class App extends Component {

  constructor() {

    super();

    this.state = {

      buttonPressed: 0,

      buttonCount: [1,2,3,4,5]

    }

  }


  handleClick = (event) => {

    this.setState({ buttonPressed: event.target.id });

    

  }


  render() {

    return(

      <div>

      {this.state.buttonCount.length > 0 ? this.state.buttonCount.map((item,index) => (

        <button id={item} key = {index} onClick={()=>this.handleClick} className={`button${item}`}>

        {item}

        </button>

      ))

      : null

      }

                  

      </div>

        )

    }

}


// Render

ReactDOM.render(

  <App />,

  document.getElementById("react")

);

.button1 {

  background-color: green;

}

.button2 {

  background-color: blue;

}

.button3 {

  background-color: red;

}

.button4 {

  background-color: yellow;

}

.button5 {

  background-color: purple;

}

<div id="react"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>



查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以擁有數(shù)組類(lèi)型的狀態(tài)變量:


this.state = {

            buttonPressed: 0,

            burronArray:[

               {

                 id : 1,

                 name : "Button 1"

               },

               {

                 id : 2,

                 name : "Button 2"

               },

            ]

        }

并在渲染函數(shù)中:


render() {

        return(

            <div>

             {this.state.buttonArray.length > 0 ? buttonArray.map((button, index) => return(

              <button 

                 key={index}

                 value = {button.id}

                 className='button1' 

                 onClick={() => this.handleClick(1)}

             > {button.name}

             </button>

             )) : null}

           </div>

        )

    }


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 2 回答
  • 0 關(guān)注
  • 184 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)