时间戳

首页 > 解决方案 > 在点击处理程序中获取属性值？

reactjs - 在点击处理程序中获取属性值？

问题描述

如何获取eventKey属性的值并将其传递给下一行中的函数？

<Accordion.Toggle 
   as={Card.Header} 
   eventKey="2" 
   data-foo="zzz" 
   onClick={(e) => CardClick(e.currentTarget.getAttribute('eventKey') ?? "unknown")}> // unknown.  Desired value: 2

在这个问题中解决了以下问题。但是，在我的情况下，我需要获取的属性不以“data-”为前缀。

作品：

<Accordion.Toggle 
   as={Card.Header} 
   eventKey="2" 
   data-foo="zzz" 
   onClick={(e) => CardClick(e.currentTarget.getAttribute('data-foo') ?? "unknown")}> // zzz

不工作：

<Accordion.Toggle 
   as={Card.Header} 
   eventKey="2" 
   data-foo="zzz" 
   onClick={(e) => CardClick(e.currentTarget.getAttribute('data-eventKey') ?? "unknown")}> // unknown

完整的组件：

<Card>
    <Accordion.Toggle as={Card.Header} eventKey="0" className="faq-header" onClick={(e) => CardClick(e.currentTarget.getAttribute('eventKey') ?? "unknown")}>
        <span className="rh5">Some text</span>
    </Accordion.Toggle>
    <Accordion.Collapse eventKey="0">
        <Card.Body>
            <span className="rh6">
                Some text
            </span>
        </Card.Body>
    </Accordion.Collapse>
</Card>

标签： reactjstypescript

解决方案

正如@DrewReese 在评论中解释的那样，不可能eventKey从 DOM 元素 ( e.target) 中获取 ，因为它永远不会传递给 DOM。

我们应该从那里得到它props。我们确实需要eventKey在三个地方使用：作为 the和 the中的eventKey道具和我们的. 但是当它被抽象为组件 prop 时，我们只需要声明特定的事件键，即。， 一次。ToggleCollapseonClickeventKey="2"

import React from "react";
import { Accordion, Card } from "react-bootstrap";

interface RenderCardProps {
  eventKey: string;
  CardClick: (key: string) => void;
  /** add whatever else you need */
}

const RenderCard = ({ eventKey, CardClick }: RenderCardProps) => {
  return (
    <Card>
      <Accordion.Toggle
        as={Card.Header}
        eventKey={eventKey}
        className="faq-header"
        onClick={() => CardClick(eventKey)}
      >
        <span className="rh5">Some text</span>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey={eventKey}>
        <Card.Body>
          <span className="rh6">Some text</span>
        </Card.Body>
      </Accordion.Collapse>
    </Card>
  );
};

export default () => <RenderCard CardClick={console.log} eventKey="2" />;

为了将其用作实际组件，您可能也想制作ToggleContents和进入道具。CardContents

推荐阅读