反应 event.target 设置状态。 设置列表项背景颜色

Question

单击项目列表后，我想更改其背景颜色。 单击另一个后，我希望颜色恢复为默认值。 我做了这样的事情：

import React, {useState} from 'react'

function Node({expanded, name}) {

    const [targetS, setTargetS] = useState()

    const Select = (element) => {
        const {target} = element

        targetS && targetS.backgroundColor = ''
        setTargetS(target)
        targetS.style.backgroundColor = 'orange'
    }
    return (
        <li onClick={Select}>
            {expanded? '-':'+'} {name}
        </li>

    )
}

export default Node

但它不像我想的那样工作

Answer 1

如果您使用 React，请利用在 JSX 中编写 JavaScript 和 React state。 您不需要直接使用事件 object 来操作元素的颜色。 （你这样做的方式也需要一些修正）。 您可以让 React 负责触发颜色更改，方法是利用 react state 充当您的li类名的切换开关。

在Node的父组件中创建一个activeNode state 及其设置器setActiveNode 。 然后按如下方式传递：-

<Node name={name} expanded={expanded} activeNode={activeNode} setActiveNode={setActiveNode}/>

import React, {useState} from 'react'

function Node({expanded, name, setActiveNode, activeNode}) {

    const selectElement = (name) => {
       setActiveNode(name)
    }
    return (
        <li className={activeNode===name?"orange":""} onClick={()=>selectElement(name)}>
            {expanded? '-':'+'} {name}
        </li>
    )
}

export default Node

在你的样式表里面： -

orange{
background:"orange"
}