如何操作Array.map()，REACT.JS中的一个元素而不影响其他元素

Question

我想在单击按钮时更改元素的样式，但如果不更改数组中所有未单击的元素的样式的话，我想不出如何做到这一点。

<div >
{props.stuff.map(item => 
<li className={itemClass}>
<div>{item}</div>
<button onClick={...change the style of the <li> without effecting the others}>Done</button>
</li>)}
</div>

我想我需要给每个li一个唯一的ID，并在我的click Handler函数中访问该ID，并将另一个css类仅应用于具有该ID的li……但我不知道如何做到这一点。或者我可能走错了方向。如有任何建议，我们将不胜感激！

Answer 1

您可以尝试以下操作：

const handleClick=(e)=>{
e.preventDefault();
e.target.style.color = 'red'
}
<button onClick={(e) => handleClick(e)}>Done</button>

Answer 2

不确定这是不是">最佳方式"；因为我自己不是前端开发人员，但您可以将li创建为一个独立的组件，然后使用React的useState钩子。例如：

/* your file */
<div>
{props.stuff.map(item => <MagicLi>{item}</MagicLi>)}
</div>

/* separated component file */
import React, { useState } from 'react';
function MagicLi(props) {

const [color, setColor] = useState('li-orange');
const changeColor = function() {
if (color === 'li-orange') setColor('li-green');
else setColor('li-orange');
};
return (
<li className={color}>
<div>{props.children}</div>
<button onClick={changeColor}>Done</button>
</li>
);
}
export default MagicLi;

/* add to your css file the styling you want */
.li-orange {
color: orange;
}
.li-green {
color: green;
}

Answer 3

由于通过stuff.map迭代集合，因此可以将条件样式应用于所需元素。不需要id。

例如：

const [clickedIndex, setClickedIndex] = useState(null)
const specialStyle = { ...someStyles }
<div >
{props.stuff.map((item, index) => 
<li className={itemClass} style={index === clickedIndex ? specialStyle: null}>
<div>{item}</div>
<button onClick={() => setClickedIndex(index)}>Done</button>
</li>)}
</div>

为了扩展以上答案，它仅限于一个特殊颜色的li标签。如果每个li标签都需要跟踪它自己的特殊颜色状态，那么一个新组件将是渲染一个li并跟踪它自己状态的好方法。

例如：

{props.stuff.map((item, index) => <CustomLI key={index}/>)

const CustomLi = (props) {
... state & render stuff
}