reactjs 获取Map元素的属性

nszi6y05 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(165)

假设我有一个数组，我像这样Map它：

listDetails.map((detail, i) => (
            <React.Fragment key={i}>
              <PackageDetails styles={styles} detail={detail} />
            </React.Fragment>
  ))}

如何获得被单击元素的style和detail？
我不想在每次点击时再做一次Map和比较他们的ID。
这个Map给了我5个PackageDetails组件。我只想得到被点击组件的style和detail。
这是我PackageDetails组件：

详细信息未传递到DOM。我无法使用e.target

从“react”导入React;

const PackageDetails = ({ styles, detail }) => {
  return (
    <div className={styles.nameDiscount}>
      <section>
        <span className={styles.countName}>
          <p>{detail.Name}</p>
        </span>
      </section>
      <p className={styles.InsurancePart}>
        {detail.InsurancePart}  
      </p>
      <p className={styles.InsurancePart}>
      
        {detail.PatientPart.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "}
       
      </p>
      <p className={styles.InsurancePart}>
        
        {detail.TotalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "}
       
      </p>
      <p className={styles.InsurancePart}>{detail.Count} </p>
    </div>
  );
};

export default PackageDetails;

reactjs

来源：https://stackoverflow.com/questions/74655946/getting-properties-of-mapped-element

1条答案

按热度按时间

cvxl0en21#

可以将函数作为属性传递给PackageDetails组件，单击PackageDetails时将调用该组件。此函数可以将样式和详细信息属性作为参数，并可用于更新父组件的状态。
示例代码：

const MyComponent = () => {
  const [selectedStyle, setSelectedStyle] = useState(null);
  const [selectedDetail, setSelectedDetail] = useState(null);

  const handleClick = (styles, detail) => {
    setSelectedStyle(styles);
    setSelectedDetail(detail);
  }

  return (
    <div>
      {listDetails.map((detail, i) => (
        <React.Fragment key={i}>
          <PackageDetails styles={styles} detail={detail} onClick={handleClick} />
        </React.Fragment>
      ))}
    </div>
  );
}

在PackageDetails组件中，可以调用onClick函数，该函数在单击该组件时作为prop传递：

const PackageDetails = ({ styles, detail, onClick }) => {
  return (
    <div className={styles.nameDiscount} onClick={() => onClick(styles, detail)}>
      ...
    </div>
  );
};

这样，当单击PackageDetails时，将调用父组件中的handleClick函数，并使用所单击的PackageDetails的样式和详细信息更新状态。

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 获取Map元素的属性

1条答案

相关问题

热门标签

最新问答