如何从 React js 中的项目数组中获取当前值 onClick？

Question

我有一个颜色列表，我试图从列表中获取当前颜色 onClick，但我却获取了整个颜色列表。我有一个子组件，我在其中映射数组：

function Child({colorList, setBackgroundColor}){
return(
<Box>
{colorList.map((i,key)=>
            <List key={key}>
                <ListItem >
                <IconButton icon={<FiCircle  fill={i}/>} onClick={setBackgroundColor}  color={i}/>
                </ListItem>
            </List>
</Box>
)
}

我正在传递父组件中的值：

function Parent(){
  const [bgColor,setBgColor] = useState('')
const [colorList, setColorList] = useState(['blue','red','green'])

 function setBackgroundColor(){
       const selectedValue = colorList.filter((color,key)=>color[key])
       setBgColor(selectedValue)
        console.log(bgColor)
    }

return(
<Child colorList={colorList} setBackgroundColor={setBackgroundColor}/>
)
}

当我显式传递索引时 setBgColor(selectedValue[0]) 它起作用了。有人可以帮我理解我做错了什么吗？如有任何帮助，我们将不胜感激！

Answer 1

首先 - 不要将 map 方法中的第一个参数称为“i” 如果你为颜色做地图那么它是 'color'

其次 - 你可以这样写：

 <IconButton
  icon={<FiCircle fill={i} />}
  onClick={() => {
    setBackgroundColor(i);
  }}
  color={i}
/>

你的函数 setBackgroundColor 会在你点击它时得到你的颜色

如何从 React js 中的项目数组中获取当前值 onClick？

How to get current value onClick from an array of items in React js?

arrays

filter

reactjs

react-props