Question

React 组件

import React, {useState} from 'react';
import './CounterButton.css';

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            event.target.classList.toggle('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
        
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p>{currentCount}</p>
        </div>
    );
};

export default CounterButton;

此组件的外部样式表

.count-container {
  display: flex;
  padding: 10px;
}

.count-container > button {
  width: 50px;
  margin: 0 10px;
}

.bound-hit {
  color: red;
}

我有一个反应组件和该组件的样式表。在这种情况下，它将 class bound-hit 切换到按钮的 classList。我可以使用 event.target 选择按钮，但我想将此类切换到我的 div 中的 <p></p> 标记。我的问题是如何使用事件选择该 p 标签。 p 标签就像按钮的兄弟。类 count-container 的 div 是父级。我也可以通过 event.target.parent 选择父 div 但我想选择 p 标签并将类 bound-hit 切换到那个..我该怎么做？

Answer 1

我认为您不需要在这里提供特定于 React 的答案。

在 vanilla JS 中，您可以使用 nextElementSibling method。

const handleClick = (event) => {
  const p = event.target.nextElementSibling
}

或者，您可以在 CSS 中使用 adjacent sibling combinator 来实现。

.bound-hit + p {
  // apply styles to the <p> that's just after .bound-hit in the DOM
}

但是，如果您在 React 组件中“手动”添加一个类（意味着这个类被添加到 DOM 中而没有任何状态表示），一些 virtual DOM reconciliations 最终可能会删除它。

在很多情况下，这不会成为问题，但如果是，那么您应该为它使用状态。下面是一个简化的示例：

const [pClass, setPClass] = useState('')
const handleClick = () => {
  setPClass('bound-hit')
}

return (
  <p className={pClass} />
)

Answer 2

问题不应该是“如何选择同级”，而是“如何在 [condition] 上为 P 元素分配 CSS 类”。

如果 React 组件直接拥有（子）元素的所有权，您可以简单地更改组件状态并使用 className 将其应用于元素的类列表。

在组件内执行任何 DOM 操作/遍历主要是使用 React 的不良形式，并且会使解决方案过于复杂。

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    const [currentClass, setCurrentClass] = useState();
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            setCurrentClass('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p className={currentClass}>{currentCount}</p>
        </div>
    );
};

如何使用 React 选择兄弟元素？

2 个答案: