反应，如何只切换一个按钮的背景色？

如何解决反应，如何只切换一个按钮的背景色？

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

App.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}
    </>
  );
}

谢谢！

解决方法

您可以简单地这样做。基本上跟踪总人数。然后根据人数（即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

,

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

,

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

App.js

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

const initialState = [
  {
    person: "Ela",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,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}
    </>
  );
}

工作示例over here

,

将新颜色设置为不显示按钮。

toctree

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

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