React，如何切换一个按钮的背景颜色

Question

单击后，我尝试更改每个按钮的背景色。问题是，它同时适用于所有按钮，而不仅仅适用于单击的一个按钮。我想，我应该用e或index来修复它，但我真的不知道该怎么做。

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

谢谢！

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调用render，所有按钮都从状态中获取颜色。

或者你必须在人物中有颜色道具，并在事件中更改该颜色。(Than元素必须从Person获得颜色(