使用事件 React 更改 class 或特定元素的样式

Question

我在使用 React 时遇到困难，我使用地图在它们各自的 Card 父级中创建了一些隐藏的叠加层 div。我希望叠加层 div 可见，但仅适用于我的鼠标悬停在上面的卡片。我正在使用 bootstrap-react.

  const [showResults, setShowResults] = React.useState(false);
  const onEnter = () => setShowResults(true);
  const onExit = () => setShowResults(false);

{filterDataState &&
            filterDataState.map((type: any) => (
              <Col className='p-0 mClass' onMouseEnter={onEnter} onMouseLeave={onExit}>
                      <div className={ showResults ?  undefined :'d-none' } > overlay placeholder</div>
                <Card className='m-auto' bg='dark' text='white' key={type.id} style={{}}>
                  <Card.Img src={type.img} />
                  <Card.Header className='text-center'><h6>{type.nome}</h6></Card.Header>
                  <Card.Body className='text-center'>{type.content}</Card.Body>
                </Card>
              </Col>
            ))}

主要问题是每次我将鼠标悬停在卡片上时，叠加层 div 会显示在所有卡片上，而不是只显示在我悬停的卡片上。

Answer 1

您可以使用密钥或ID来确定是鼠标输入的卡：

const [showResults, setShowResults] = React.useState(false);
  const onEnter = (id) => setShowResults(id);
  const onExit = () => setShowResults(false);

{filterDataState &&
            filterDataState.map((type: any) => (
              <Col className='p-0 mClass' onMouseEnter={onEnter(type.id)} onMouseLeave={onExit}>
                      <div className={ showResults === type.id ?  undefined :'d-none' } > overlay placeholder</div>
                <Card className='m-auto' bg='dark' text='white' key={type.id} style={{}}>
                  <Card.Img src={type.img} />
                  <Card.Header className='text-center'><h6>{type.nome}</h6></Card.Header>
                  <Card.Body className='text-center'>{type.content}</Card.Body>
                </Card>
              </Col>
            ))}

将 id 参数添加到 onEnter 函数并用 showResults === type.id

检查它

使用事件 React 更改 class 或特定元素的样式

Change class or style of specific element using events React

typescript

reactjs

react-bootstrap