React，如何一键切换背景颜色？

Question

我尝试在单击后更改每个按钮的背景颜色。问题是，它适用于所有按钮，而不是仅适用于单击的按钮。我认为，我应该使用 e 或索引来修复它，但我真的不知道该怎么做。

应用程序.js

const initialState = [
  {
    person: "Ela",
    age: 48
  },
  {
    person: "Natalia",
    age: 28
  }
];

const green = "#39D1B4";
const yellow = "#FFD712";

export default function App() {
  const [person, setPerson] = useState(initialState);
  const [buttonColor, setButtonColor] = useState(green);

  function handleColorChange(e) {
    const button = e.target.style.backgroundColor;
    const newButton = e.target.style.backgroundColor;

    const newColor = buttonColor === green ? yellow : green;
    setButtonColor(newColor);
  }

  return (
    <div className="App">
      {person.map((per, i) => {
        return (
          <Person
            color={buttonColor}
            key={i}
            index={i}
            onClick={handleColorChange}
            person={per}
          />
        );
      })}
    </div>
  );
}

Person.js

import React from "react";

export default function Person({ person, onClick, color, index }) {
  return (
    <>
      <h3>My name is {person.person}</h3>
      <h3>My age is {person.age}</h3>
      <button
        style={{ backgroundColor: color }}
        color={color}
        name={person.person}
        onClick={onClick}
        index={index}
      >
        Change color
      </button>
      {index}
    </>
  );
}

谢谢！

Answer 1

你可以简单地这样做。基本上追踪全人。并根据人员编号（即 0,1）更新相应的按钮值：

import React,{useState} from "react";
import "./style.css";

const initialState = [
  {
    person: "Ela",
    age: 48
  },
  {
    person: "Natalia",
    age: 28
  }
];

const green = "#39D1B4";
const yellow = "#FFD712";

function Person({ person, onClick, color, index }) {
  return (
    <>
      <h3>My name is {person.person}</h3>
      <h3>My age is {person.age}</h3>
      <button
        style={{ backgroundColor: color }}
        color={color}
        name={person.person}
        onClick={onClick}
        index={index}
      >
        Change color
      </button>
      {index}
    </>
  );
}

export default function App() {
  const [person, setPerson] = useState(initialState);
  const [buttonColor, setButtonColor] = useState({0:green,1:green});

  function handleColorChange(e,i) {
    console.log(i)
    const button = e.target.style.backgroundColor;
    const newButton = e.target.style.backgroundColor;

    const newColor = buttonColor[i] === green ? yellow : green;
    const newState ={...buttonColor,[i]:newColor}
    setButtonColor(newState);
  }

  return (
    <div className="App">
      {person.map((per, i) => {
        return (
          <Person
            color={buttonColor[i]}
            key={i}
            index={i}
            onClick={(e) => handleColorChange(e,i)}
            person={per}
          />
        );
      })}
    </div>
  );
}

这里是演示：https://stackblitz.com/edit/react-3ca52l

Answer 2

您应该将更改背景颜色的逻辑移至 Person 组件。因此，每个按钮都有自己的状态和颜色值。
因为现在您将按钮颜色存储在父组件中并与所有子组件共享，这就是为什么当一个子组件更改颜色时，另一个子组件会收到此更改。

Answer 3

只需将您的handleColorChange方法和buttonColor状态移动到Person组件中，这样颜色更改只会影响每个按钮本身，就像这样；

App.js

import React, { useState } from "react";
import Person from "./Person";

const initialState = [
  {
    person: "Ela",
    age: 48
  },
  {
    person: "Natalia",
    age: 28
  }
];

export default function App() {
  const [person, setPerson] = useState(initialState);

  return (
    <div className="App">
      {person.map((per, i) => {
        return <Person key={i} index={i} person={per} />;
      })}
    </div>
  );
}

Person.js

import React, { useState } from "react";

export default function Person({ person, onClick, color, index }) {
  let green = "#39D1B4";
  let yellow = "#FFD712";

  const [buttonColor, setButtonColor] = useState(green);

  function handleColorChange(e) {
    const button = e.target.style.backgroundColor;
    const newButton = e.target.style.backgroundColor;

    const newColor = buttonColor === green ? yellow : green;
    setButtonColor(newColor);
  }

  return (
    <>
      <h3>My name is {person.person}</h3>
      <h3>My age is {person.age}</h3>
      <button
        style={{ backgroundColor: buttonColor }}
        color={buttonColor}
        name={person.person}
        onClick={handleColorChange}
        index={index}
      >
        Change color
      </button>
      {index}
    </>
  );
}

工作示例在这里

Answer 4

将新颜色设置为按钮而不是声明。

const newColor = buttonColor === green ? yellow : green;
e.target.style.backgroundColor = newColor;

setState 调用渲染，所有按钮都会从状态中获取颜色。

或者您的Person中必须有颜色道具，并在发生事件时更改该颜色。 （元素必须从 Person 获取颜色）