單擊名稱 - 顯示電話號碼 React

Question

所以我有這個人的列表，我想讓這個名字可以點擊，這樣它就可以顯示這個人的位置。

我怎么能這樣做？

因此，當單擊第一個<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>

Answer 1

在 React 中，您可以像這樣添加一個簡單的onClick ：

<li onClick={function () {

alert(owners.locationOwner);

}} > {owners.nameOwner}</li>

它基本上是onClick={}接受 function。 這個 function 在 onClick 事件發生時被調用。

反應文檔

Answer 2

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;