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

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

如何在反應(yīng)中的兄弟姐妹之間切換

如何在反應(yīng)中的兄弟姐妹之間切換

莫回?zé)o 2023-06-15 16:44:12
考慮我有一個(gè)這樣的 App 組件:import React from "react";import Component from "./component";function App() {    const array = [        { key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }    ]  return (    <div>        {array.map( (item) => {            <Component key={item.key} />        })}    </div>  );}export default App;組件是:import React , { useState } from "react";function Component() {    const [ style , setStyle ]= useState({        height:"50px",width:"50px",backgroundColor:"blue"    });  return (    <div style={style} onclick={} >        Content    </div>  );}export default Component;這將創(chuàng)建一個(gè) App div,其中將有四個(gè)子 div 元素。我想要的是; 每當(dāng)我單擊其中一個(gè)內(nèi)部 div 時(shí),其余三個(gè) div 必須將其顏色更改為紅色。不是一次,而是每次我單擊四個(gè)中的任何一個(gè)時(shí)。
查看完整描述

3 回答

?
一只斗牛犬

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

添加一個(gè)狀態(tài)來存儲點(diǎn)擊的(或者說,當(dāng)前選擇的)div


import React, { useState } from "react";

import Component from "./component";


function App() {

    const [selectedDiv, setSelectedDiv] = useState(-1);


    const array = [

        { key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }

    ]

  return (

    <div>

        {array.map( (item) => {

            <Component key={item.key} clickHandler={() => {setSelectedDiv(item.key)}} isColoured={(selectedDiv === item.key || selectedDiv < 0) ? false : true} />

        })}

    </div>

  );

}


export default App;

現(xiàn)在Component,檢查isColoured道具,如果是true,應(yīng)用顏色,否則不要。


import React from "react";


function Component(props) {

  return (

    <div onClick={props.clickHandler} style={props.isColoured ? {height:"50px",width:"50px",backgroundColor:"red"} : null}>

        Content

    </div>

  );

}


export default Component;


查看完整回答
反對 回復(fù) 2023-06-15
?
FFIVE

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

試試這個(gè)方法,


跟蹤狀態(tài)中選定的 div(使用 id)并Component根據(jù)狀態(tài)中選定的 div 更改顏色。


import React, { useState } from "react";

import "./styles.css";


export default function App() {

  const [selectedId, setSelectedId] = useState(null);

  const array = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];

  return (

    <div>

      {array.map((item) => {

        return (

          <Component

            key={item.key}

            id={item.key}

            selectedPanel={selectedId === item.key || selectedId === null}

            onClick={() => setSelectedId(item.key)}

          />

        );

      })}

    </div>

  );

}


function Component({ id, onClick, selectedPanel }) {

  return (

    <div

      className="panel"

      style={{ backgroundColor: selectedPanel ? "blue" : "red" }}

      onClick={onClick}

    >

      Content - {id}

    </div>

  );

}

工作代碼 - https://codesandbox.io/s/zealous-clarke-r3fmf?file=/src/App.js:0-770

希望這是您正在尋找的用例。如果您遇到任何問題,請告訴我。


查看完整回答
反對 回復(fù) 2023-06-15
?
ITMISS

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

你可以添加狀態(tài)


  const [selectedId, setSelectedId] = useState(null);

然后制作一個(gè)函數(shù)來呈現(xiàn)在這種情況下的指南


const renderGuide = ({ item, index }) => {

    console.log(item)

    const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";

    return (

      <Guide

        item={item}

        index={index}

        onPress={() => setSelectedId(item.id)}

        style={{ backgroundColor }}

      />

    );

  };

這樣你就可以訪問由 id 選擇的項(xiàng)目


查看完整回答
反對 回復(fù) 2023-06-15
  • 3 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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