仅显示一个元素，其余部分应在 react js 中重置

Question

在 useState 挂钩的帮助下，尝试仅显示 div 的一个元素并重置数组中的所有其他元素。

我以布尔数组的形式创建了一个初始状态，表示每个元素的显示值（true 表示显示，false 表示隐藏）。在每个元素上传递一个 onClick 事件处理程序，这会将数组的所有值更改为 true，并将唯一在其索引处单击的元素更改为 false。我附上了下面的代码。此外，props.id 包含组件的索引/键。

代码

import React,{useState} from "react";
import myComponent from "./Components/myComponents.js";

const Add = (props) =>{
    const [showVals,changeShowVals]=useState([true,true,true,true,true,true,true]);

    const displayHandler=(id)=>{
        const x=id;
        const vals=new Array(7).fill(true);
        vals[x]=!vals[x];
        changeShowVals(vals);
    }
    return(
        <div>
            {showVals[props.id]?
                <myComponent onClick={()=>displayHandler(props.id)}/>:null}
        </div>
    );
}

export default Add;

Answer 1

根据您的代码更新了答案。

您没有为Red 组件定义点击处理程序。

我的组件：-

import React from "react";

function MyComponent({ onClick, number }) {
  const style = {
    height: "20px",
    width: "20px",
    backgroundColor: "red",
    margin: "4px",
    cursor: "pointer"
  };

  return (
    <div onClick={() => onClick(number)} style={style}>
      {number}
    </div>
  );
}
export default MyComponent;

应用组件：-

 import React, { useState } from "react";
    import Red from "./red";
    import Green from "./green";
    
    const App = () => {
      const [showVals, changeShowVals] = useState([
        true,
        true,
        true,
        true,
        true,
        true,
        true
      ]);
    
      const displayHandler = (index) => {
        const vals = new Array(7).fill(true);
        vals[index] = !vals[index];
        changeShowVals(vals);
      };
    
      const number = [0, 1, 2, 3, 4, 5, 6];
      return number.map((ele, i) =>
        showVals[i] ? (
          <div onClick={() => displayHandler(ele)}>
            <Red number={ele} key={ele + " red"} />
          </div>
        ) : (
          <Green number={ele} key={ele + " green"} />
        )
      );
    };
    export default App;

代码沙盒 - https://codesandbox.io/s/material-demo-forked-8lgc7?file=/App.js:0-684