如何引用另一个组件使用 .map() 创建的组件？

Question

我的目标是拥有一个切换按钮网格，当 selected 时，它们的值将保存在一个数组中。该数组用于映射出另一行按钮。

当您 select 新行中的按钮时，它会取消 select 相应的切换按钮，从数组中删除它的值并使其自身也消失。

None 已选择：

选择后：

该步骤无效（通过单击下面的值删除 selected 按钮）：

我了解如何在数组中添加和删除它，我最大的障碍是找到一种方法来引用已经 selected 的切换按钮以将其关闭。

我的第一个想法是像 css 那样使用 id，但是 React 组件无法做到这一点。经过大量研究后，我不断遇到 useRef。我无法全神贯注地思考它，所有关于它的尝试都对我的情况不起作用。

有大佬指点一下吗？

主要代码

import Rows from "./playground2";

export default function PlaygroundMain(props){
    //This data can come in at different lengths
    const fetchData = [
        {
            info: "info1",
            data: {data1 : 11, data2 : 12, data3 : 13 }
        },
        {
            info: "info2",
            data: { data1 : 21, data2 : 22, data3 : 23 }
        },
        {
            info: "info3",
            data: { data1 : 31, data2 : 32, data3 : 33 }
        }
    ]

    const [selectedButtons, setSelectedButtons] = useState([])

    function handleButtonSelected(button) {
        const newButtons = selectedButtons
        if (!newButtons.includes(button)) {
            newButtons.push(button)
        } else {
            newButtons.splice(newButtons.indexOf(button), 1)
        }
        setSelectedButtons([...newButtons])
        console.log(selectedButtons)
    }

    return (
        <Box>
            {fetchData.map((row, index) => {
                return ( <Rows dataFromParent={row} selectHandler={handleButtonSelected}/> )
            })}
            {selectedButtons.map((button, index) => {
                return ( <Button> {button} </Button> )
            })}  
        </Box>
    )
}

行中的代码：

import ClickableButton from "./playground3";

export default function Rows(props){   
    function handleButtonSelected(button) {
        props.selectHandler(button)
    }
    
    return (
        <Grid container>
            <Grid item>
                <ClickableButton text={props.dataFromParent.data.data1} selectHandler={handleButtonSelected}/>
            </Grid>
            <Grid item>
                <ClickableButton text={props.dataFromParent.data.data2} selectHandler={handleButtonSelected}/>
            </Grid>
            <Grid item>
                <ClickableButton text={props.dataFromParent.data.data3} selectHandler={handleButtonSelected}/>
            </Grid>
        </Grid>
    )
}

来自按钮的代码：

export default function ClickableButton(props){

    const [selectedBool, setSelected] = useState(false);

    function buttonSelected(e) {
        setSelected(!selectedBool)
        props.selectHandler(props.text)
    }
    
    return (
        <ToggleButton
            selected={selectedBool}
            onChange={buttonSelected}
        >
                {props.text}
        </ToggleButton>
    )
}

如有任何建议，我们将不胜感激！

Answer 1

与其为按钮创建单独的状态，不如 re-use selectedButtons？

这样，您的切换现在取决于您的 selectedButtons 数组。

import React from "react";
import { ToggleButton } from "@mui/material";

export default function ClickableButton(props) {
  function buttonSelected(e) {
    props.selectHandler(props.text);
  }

  return (
    <ToggleButton
      selected={props.selectedButtons.includes(props.text) ? true : false}
      onChange={buttonSelected}
    >
      {props.text}
    </ToggleButton>
  );
}

现在从该数组中删除也会取消网格值。

  function handle(i) {
    setSelectedButtons([
      ...selectedButtons.slice(0, i),
      ...selectedButtons.slice(i + 1)
    ]);
  }

操场：https://codesandbox.io/s/naughty-bouman-jcvbuh?file=/src/App.js:826-961

如何引用另一个组件使用 .map() 创建的组件？

How to reference a component created with .map() by another component?

reactjs

material-ui

react-hooks

use-ref