![](/img/trans.png)
[英]Toggle(show/hide) components onClick in single page React component useState
[英]How to show single model when onClick in React?
如何应用 function 以便在单击 p 标签时,应仅为该 p 标签打开一个 react-bootstrap 模态,而不是为所有其他标签打开。
我应该如何以这样一种方式进行编码,即当单击p tag
时,应该只为该 p 标签打开一个模态,并且只打开一个模态,而不是同时打开
这是我的实时代码https://codesandbox.io/s/distracted-water-suuuw?file=/App.js
export default function App() {
const [modalShowing, setModalShowing] = useState(false);
const [items] = useState({
stude: [
{ id: "1", name: "AZ" },
{ id: "2", name: "AX" },
{ id: "3", name: "AY" },
{ id: "4", name: "AB" },
{ id: "5", name: "AQ" },
{ id: "6", name: "AE" }
]
});
const handleModel = () => {
setModalShowing(true);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{items.stude.map(item => (
<div key={item.id}>
<p onClick={handleModel}>{item.name}</p>
<Modal
show={modalShowing}
onHide={() => setModalShowing(false)}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
ITEMS
</Modal.Title>
</Modal.Header>
<Modal.Body>{item.name}</Modal.Body>
</Modal>
</div>
))}
</div>
);
}
不要创建多个模式,这是一种不好的做法。 在 map function 之外创建单个模态并使其内容动态化。 在 map function 中执行<p onClick={() => handleClick(item)}
> 并在 state 中设置点击的项目。 然后,在模态中,使用 state 中设置的项目。 就像是:
export default function App() {
const [modalShowing, setModalShowing] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
const [items] = useState({
stude: [
{ id: "1", name: "AZ" },
{ id: "2", name: "AX" },
{ id: "3", name: "AY" },
{ id: "4", name: "AB" },
{ id: "5", name: "AQ" },
{ id: "6", name: "AE" }
]
});
const handleModel = item => {
setSelectedItem(item);
setModalShowing(true);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{items.stude.map(item => (
<div key={item.id}>
<p onClick={() => handleModel(item)}>{item.name}</p>
</div>
))}
<Modal
show={modalShowing}
onHide={() => setModalShowing(false)}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
ITEMS
</Modal.Title>
</Modal.Header>
<Modal.Body>{selectedItem.name}</Modal.Body>
</Modal>
</div>
);
}
您可以将一些信息作为参数传递给您的处理程序。 如我所见,您正在使用 map function 所以可以这样做。
例如(在 class 组件中):
constructor(){
this.state = {
stude: [{ id: "1", name: "AZ" }, { id: "2", name: "AX" }]
showModal: false,
currentModalData: {}
}
}
toggleModal = (item) => this.setState({showModal: true, currentModalData: item})
render(){
return (
{this.state.stude.map(item => <p onPress={()=>this.renderModal(item)}>{item.name}</p>)}
{this.state.showModal && this.renderModal()}
)
}
renderModal = () => (/*YOUR MODAL CODE*/)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.