单击名称 - 显示 phone 编号 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={}接受一个函数。 onClick-Event 发生时调用此函数。

React Docs

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;

单击名称 - 显示 phone 编号 React

Click on Name - shows phone Number React

javascript

onclick

reactjs