[英]How to show single model when onClick in React?
How to apply function so that on click of p tag a react-bootstrap Modal should be open for that p tag only not for all other tags.如何应用 function 以便在单击 p 标签时,应仅为该 p 标签打开一个 react-bootstrap 模态,而不是为所有其他标签打开。
How I should code in a such a way that when a p tag
is clicked a modal should open for that p tag only and a single Modal only, not all the simultaneously我应该如何以这样一种方式进行编码,即当单击
p tag
时,应该只为该 p 标签打开一个模态,并且只打开一个模态,而不是同时打开
here is my live code https://codesandbox.io/s/distracted-water-suuuw?file=/App.js这是我的实时代码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>
);
}
Don't create multiple modals, its a bad practice.不要创建多个模式,这是一种不好的做法。 Create a single modal outside the map function and make its content dynamic.
在 map function 之外创建单个模态并使其内容动态化。 In the map function do
<p onClick={() => handleClick(item)}
> and set the clicked item in the state.在 map function 中执行
<p onClick={() => handleClick(item)}
> 并在 state 中设置点击的项目。 Then, in the modal, use the item set in the state.然后,在模态中,使用 state 中设置的项目。 Something like:
就像是:
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>
);
}
you can pass some info as a parameter to your handler.您可以将一些信息作为参数传递给您的处理程序。 as i can see you are using map function so it can be done something like this.
如我所见,您正在使用 map function 所以可以这样做。
for example (in class component):例如(在 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.