[英]How to pass the 'onClick' function to child component in React
[英]How to pass a custom onClick function from parent to child in react
我正在开发一个弹出组件,其中父组件具有以下代码
import * as React from "react";
import "./styles.css";
import Popup from "./Popup";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Popup
src="https://picsum.photos/200"
alt="Fog"
coreValue="Customer Focus"
/>
<Popup
src="https://picsum.photos/200/300?grayscale"
alt="Grey Mountains"
coreValue="Persistence"
/>
</div>
);
}
子组件应根据道具呈现自定义弹出窗口
import * as React from "react";
import { useState } from "react";
interface Props {
src: string;
alt: string;
coreValue: string;
}
export default function Popup({ src, alt, coreValue }: Props): JSX.Element {
const [customerFocus, setCustomerFocus] = useState(false);
const [persistence, setPersistence] = useState(false);
const toggleCustomerFocus = () => {
setCustomerFocus(!customerFocus);
};
const togglePersistence = () => {
setPersistence(!persistence);
};
const data = [
{
customerFocus: {
title: "Dummy Title 1",
content: "Dummy Content 1"
},
persistence: {
title: "Dummy Title 2",
content: "Dummy Content 2"
}
}
];
return (
<>
<figure onClick={toggleCustomerFocus}>
<img src={src} alt={alt} />
<figcaption>{coreValue}</figcaption>
</figure>
{customerFocus && (
<section>
<h4>{data[0].customerFocus.title}</h4>
<p>{data[0].customerFocus.content}</p>
<button onClick={toggleCustomerFocus}>Close 1</button>
</section>
)}
{persistence && (
<section>
<h4>{data[1].persistence.title}</h4>
<p>{data[1].persistence.content}</p>
<button onClick={togglePersistence}>Close 2</button>
</section>
)}
</>
);
}
其中<figure onClick={toggleCustomerFocus}>
,我想将自定义onClick
function 从父级传递到其子级,以便第一个弹出窗口在单击时呈现 Dummy Title 1 和 Dummy Content 1 并在第二个弹出窗口呈现 Dummy单击时的内容 2。 截至目前,两者都在单击时呈现相同的弹出窗口。
如何将自定义 onClick function 从父母发送给孩子?
虽然您可以从父App
组件传入 state 和 setter,但这对您的示例没有多大意义。
我会尽量让Popup
组件更通用。
在下面的示例中, Popup
组件管理自己的 UI state(打开/关闭),但所有内容都作为道具传入。
import React, { useState } from "react";
import "./styles.css";
const data = [
{
title: "Customer Focus title",
content: "Customer Focus content",
src: "https://picsum.photos/200",
alt: "Fog",
coreValue: "Customer Focus"
},
{
title: "Persistence title",
content: "Persistence content",
src: "https://picsum.photos/200/300?grayscale",
alt: "Grey Mountains",
coreValue: "Persistence"
}
];
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{data.map(({ title, content, src, alt, coreValue }) => (
<Popup
title={title}
content={content}
src={src}
alt={alt}
coreValue={coreValue}
/>
))}
</div>
);
}
interface Props {
title: string;
content: string;
src: string;
alt: string;
coreValue: string;
}
function Popup({
title = "",
content = "",
src = "",
alt = "",
coreValue = ""
}: Props) {
const [showDetails, setShowDetails] = useState(false);
return (
<>
<figure onClick={() => setShowDetails(true)}>
<img src={src} alt={alt} />
<figcaption>{coreValue}</figcaption>
</figure>
{showDetails && (
<section>
<h4>{title}</h4>
<p>{content}</p>
<button onClick={() => setShowDetails(false)}>Close 2</button>
</section>
)}
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.