使用React和钩子设置样式

Question

我一直在使用React JS很短的时间。查看以下示例，我想仅在点击线上而不是所有行上更改背景颜色。实际上，单击一排将其变成红色并再次单击使行背景为白色。在更改颜色之前，我将所有线路都设置为默认的颜色状态，但是有些问题。

import { useState } from "react";

export default function App() {
  const [color, setColor] = useState("white");

  const handleClick = (e) => {

    const value_color = e.target.style.backgroundColor;

    if (value_color != "" && value_color != undefined) {
      if (value_color === "white") 
        var new_color = "red";
      else 
        var new_color = "white";
    }

    setColor("white");
    e.target.style.backgroundColor = new_color;

  };

  return (
    <div>
      <div
        id={"line1_id"}
        style={{
          backgroundColor: color
        }}
        onClick={handleClick}
      >
        First Line
      </div>

      <div
        id={"line2_id"}
        style={{
          backgroundColor: color
        }}
        onClick={handleClick}
      >
        Second Line
      </div>
    </div>
  );


}

编辑： 也许我解释了问题错误。实际上，我的代码有效，但是单击两个我都会得到两条红线。通常，当我单击新线路时，另一行应该再次变白。谢谢

Answer 1

我创建了一个npm软件包，可以做到这一点：管理React的CSS变量。

https://github.com/morewings/morewings/css-vars-vars-hook-hook

Answer 2

为数据创建JSON，并使用MAP用于渲染数据并更新backgroundColor

import { useState } from 'react';

export default function App() {
  const [data, setData] = useState([
    { id: 1, text: 'First Line', color: 'white' },
    { id: 2, text: 'Second Line', color: 'white' }
  ]);
  const handleClick = item => {
    setData(data =>
      data.map(n => {
        return {
          ...n,
           color:  n.id === item.id && n.color === 'white' ? 'red' : 'white'
        };
      })
    );
  };

  return (
    <div>
      {data.map(item => (
        <div
          id={item.id}
          key={item.id}
          style={{
            backgroundColor: item.color
          }}
          onClick={() => handleClick(item)}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
}

这是 codesandbox示例

Answer 3

new_color值未定义，因为您将其设置在if-else语句中。因此，只有IF-ELSE块中的代码才能访问它们。您可以声明一个变量并在其外部分配默认值，然后重新分配它：

// some other code
let new_color = "white"
if (value_color != "" && value_color != undefined) {
      if (value_color === "white") 
        new_color = "red";
      else 
        new_color = "white";
}
// some code
e.target.style.backgroundColor = new_color;