代码之家 › 专栏 › 技术社区 › ryy77

单击当前子div时,如何更改p标记的图像和样式?反应

reactjs

ryy77 · 技术社区 · 2 年前

如何更改所选当前框的图像和段落颜色。我将感谢任何帮助。非常感谢。

代码如下。 https://stackblitz.com/edit/react-ts-gbc9dn?file=Child.js,App.js,Child.css

0 回复 | 直到 2 年前

Ahmet Emre Kilinc 2 年前

您需要保持selectedPack处于父组件的状态,如: const [selectedPack, setSelectedPack] = useState(); 和 focusHandler 应在单击时更新此状态。

父母亲 App.js 将类似于:

import * as React from 'react';
import { useState } from 'react';
import './style.css';
import Child from './Child';

const data = [
  {
    title: 'title one',
    pack: 'one',
    image: 'https://dummyimage.com/640x360/fff/aaa',
    imageSelected: 'https://dummyimage.com/640x360/ccc/aaa',
  },
  {
    title: 'title two',
    pack: 'two',
    image: 'https://dummyimage.com/640x360/ddd/aaa',
    imageSelected: 'https://dummyimage.com/640x360/fff/eee',
  },
  {
    title: 'title three',
    pack: 'three',
    image: 'https://dummyimage.com/640x360/fff/bbb',
    imageSelected: 'https://dummyimage.com/640x360/aaa/aaa',
  },
];

export default function App() {
  const [selectedPack, setSelectedPack] = useState();

  const focusHandler = (pack) => {
    setSelectedPack(pack);
  };

  return (
    <div>
      {data.map(({ image, title, imageSelected, pack }) => {
        return (
          <Child
            key={pack}
            pack={pack}
            image={image}
            imageSelected={imageSelected}
            title={title}
            currentlySelected={selectedPack === pack}
            focusHandler={focusHandler}
          />
        );
      })}
    </div>
  );
}

Child.js会像:

import * as React from 'react';
import './Child.css';

const Child = ({
  title,
  pack,
  image,
  imageSelected,
  currentlySelected,
  focusHandler,
}) => {
  const focus = currentlySelected ? 'focus' : '';
  const imageSrc = currentlySelected ? imageSelected : image;

  return (
    <div className="box" onClick={() => focusHandler(pack)}>
      <p className={focus}>{title}</p>
      <img src={imageSrc} />
    </div>
  );
};

export default Child;

This stackblitz 是此用法的一个工作示例。