如何在 React js 中设置地图项的样式答案

【问题标题】：How to set style for map item in react js如何在 React js 中设置地图项的样式
【发布时间】：2021-09-01 12:47:06
【问题描述】：

我是reactjs 的新手。我有一个array，它将是

const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]

我使用此代码生成了两张卡片：

const [selectedMediumColor, setSelectedMediumColor] = useState('')

<div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: selectedMediumColor }} onClick={() => onClickMedium(text,index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

我想在 ReactJS 中单击卡片时设置边框颜色。如果用户选择第一张卡片，边框颜色应为蓝色，下一张卡片边框颜色应为白色，反之亦然。

这是我写的函数代码：

 const onClickMedium = (medium,indexno) => {
        console.log(medium)
        console.log(indexno)

        if (medium === "TAMIL Medium") {
            
            selectedMediumColor('2px solid #00adb5')
        }
        else {
            selectedMediumColor('')

        }
    }

它正在为两张卡设置颜色。这是图像： enter image description here

我希望只为一张卡片设置颜色。我怎样才能做到这一点？请帮我解决一些问题。

【问题讨论】：

你需要做这样的事情 - stackoverflow.com/questions/69012531/…

标签： javascript html css reactjs

【解决方案1】：

您可以尝试这种方法，您可以在其中设置选定的索引：

const [selectedIndex, setSelectedIndex] = useState('')

 <div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: index === selectedIndex ? '2px solid #00adb5' : 'none'}} onClick={() => setSelectedIndex(index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

【讨论】：

这种方法的缺点是如果我有 100 张卡片，并且如果我更改 card - 1 的样式，所有 100 张卡片都会重新渲染。这些场景的理想解决方案是将卡片和状态移动到它自己的组件中。由于每张卡片都有自己的状态，现在选择卡片 1 将仅重新渲染卡片 1。

【解决方案2】：

正如@Harshit 的回答，这是实现结果的一种方法。但它可以扩展如下以在您的情况下处理超过 2 个介质，如下所示

export default function App() {
  const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"];
  const mediumBorder = ["2px solid #00adb5", "2px solid red"];

  const [selectedMedium, setSelectedMedium] = useState("");
  const [selectedMediumIndex, setSelectedMediumIndex] = useState("");

  const onClickMedium = (medium, indexno) => {
    setSelectedMedium(medium);
    setSelectedMediumIndex(indexno);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        {mediumNames.map((text, index) => (
          <div
            style={{
              border:
                selectedMedium === text ? mediumBorder[selectedMediumIndex] : ""
            }}
            onClick={() => onClickMedium(text, index)}
          >
            <div>test</div>
          </div>
        ))}
      </div>
    </div>
  );
}

通过这种方式，您可以处理任意数量的具有自定义边框样式的媒体。

CodeSandbox

【讨论】：