如何在反应之间切换

126

维尔达斯·杜拉伊

考虑我有一个像这样的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;

这将创建一个App div，在其中将有四个子div元素。

我想要的是; 每当我单击内部div之一时，其余三个div都必须将其颜色更改为红色。不是一次，而是每次单击四个时都单击一次。

Akshit Mehra

添加状态以存储被单击的（或说，当前选定的） 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;

现在，在中Component，检查isColoured道具（如果是）true，应用颜色，否则不要使用。

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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。