[英]Click on Name - shows phone Number React
所以我有这个人的列表,我想让这个名字可以点击,这样它就可以显示这个人的位置。
我怎么能这样做?
因此,当单击第一个<li>
时,它会在屏幕上显示第二个<li>
- 例如带有警报。
<ul>
{ props.owners.map((owners, j) => (
<div key={j}>
<li> {owners.nameOwner}</li>
{/*
<li>{owners.locationOwner} </li> */} {/*
<li>Phone Number : {owners.phoneOwner} </li> */}
<li> Start Date: {owners.startDateOwner.toString()} </li>
<li> End Date: {owners.endDateOwner.toString()} </li>
</div>
)) }
</ul>
在 React 中,您可以像这样添加一个简单的onClick
:
<li onClick={function () {
alert(owners.locationOwner);
}} > {owners.nameOwner}</li>
它基本上是onClick={}
接受 function。 这个 function 在 onClick 事件发生时被调用。
class Demo extends Component {
//suppose you have a list something like this
state = {
owners:[{"name" :" owners1"}, { "name": "owners2"}, { "name" : "owners3"},{ "name" : "owners4"}]
}
render() {
return (
<div >
{ this.state.owners.map((it) =>
( <li><a href="#">{it.name}</a></li>)
)}
</div>
);
}
}
export default Demo;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.