在React中顯示陣列數據onclick

我想遍歷一個數組，並在每次單擊按鈕時顯示數組中的每個元素。在React中顯示陣列數據onclick

到目前爲止，我有這樣的：

{this.state.users.map(function(user, index){ 
     return <p key={ index }>{user.name} </p>; 
     }, this)}

這在屏幕上顯示每個用戶名，一個接對方。我該怎麼做才能顯示用戶[0]，然後移動到用戶[1]，甚至更好，點擊刪除位置用戶[0]處的用戶，然後新用戶位於用戶[0]的位置，然後如果數組是空的，它顯示文本'沒有更多的用戶' 我知道如何從數組等刪除元素，它只是在React land中顯示一個，我不能這樣做

來源

2016-11-03 The worm

你能解釋一下你想達到什麼樣的？它是一個大帳篷還是用戶？點擊一個按鈕來獲取下一個用戶的詳細信息？ – Rajesh

目前它將垂直顯示用戶列表。例如約翰，保羅，彼得等。我希望它只顯示約翰，然後點擊保羅，然後點擊，彼得等用戶是一個對象數組，名稱是我顯示的屬性 –

保持索引activeUser在狀態中，然後渲染這個用戶：{ this.state.users[ this.state.activeUser ].name}。單擊時增加/減少activeUser。

demo on jsfiddle

var Users = React.createClass({ 
    getInitialState(){ 
    return { 
     users : [{ name : 'John'}, { name : 'Jane'}, { name : 'Robert' }], 
     activeUser : 0 
    }; 
    }, 
    next(){ 
    /* here you should add checking if there are more users before setting the state */ 
    this.setState({ activeUser : this.state.activeUser + 1 }); 
    }, 
    render: function() { 
    return (<div> 
     <p>{ this.state.users[ this.state.activeUser ].name} </p> 
     <span onClick={ this.next }>next</span> 
     </div>); 
    } 
});

來源

2016-11-03 09:44:30 pawel

好像你在你的問題，類似的拉傑什問有僞代碼似乎有描述某種用戶/轉盤的分頁列表中。

您需要定義列表中可見的用戶的最大數量，然後存儲當前最頂端的元素索引。我建議將這些存儲在狀態中。

然後將名稱列表存儲爲一個對象數組，每個對象都包含名稱詳細信息以及一個表示它是否可見的參數。

您最初的狀態看起來是這樣的：

{ 
    currentTopElement: 0, 
    maxNamesToShow: 1, 
    names: [ 
    {name: 'John Smith', isVisible: false}, 
    {name: 'Jane Smith', isVisible: false}, 
    ...etc. 
    ] 
}

增加您的按鈕單擊處理程序將需要將由一個遞增currentTopElement。
迭代通過名稱陣列設置可見性爲false，除非指數匹配currentTopElement的，如果它設置ISVISIBLE爲true

要玩完，在需要渲染你的名字列表中的組件可以這樣做，如果你有條件地呈現只有在其相應的可見性值是真名：

const elementsToShow = this.state.filter(t => t.isVisible);

您可以在疊代elementsToShow像這樣：

elementsToShow.map((user, index) => <p key={ index }>{user.name} </p>);

來源

2016-11-03 09:57:26 Pineda

根據我的理解你的問題可能是你正在努力實現這一點 -

let users = [{ 
 
    name: "abcd" 
 
}, { 
 
    name: "xyz" 
 
}, { 
 
    name: "temp" 
 
}]; 
 

 
class Example extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
     activeIndex: 0 
 
     }; 
 
    } 
 

 
    tick =() => { 
 
    let activeIndex = this.state.activeIndex; 
 
    if (activeIndex == this.props.users.length -1){ 
 
     activeIndex = 0; 
 
     } else { 
 
     activeIndex++; 
 
     } 
 
    this.setState({ 
 
     activeIndex 
 
    }); 
 
    } 
 

 
    render() { 
 
     return ( 
 
     < ul className = "list-group" > 
 
      < li className = "list-group-item" > 
 
       {this.props.users[this.state.activeIndex].name} 
 
       < button className = "btn btn-default" onClick={this.tick} > 
 
        show Next 
 
       < /button> 
 
       </li > 
 
      < /ul> 
 
    ); 
 
     } 
 
    } 
 

 
    ReactDOM.render( 
 
     < Example users = {users}/ > , 
 
      document.getElementById('test') 
 
    );

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="test"> 
 
</div>

來源

2016-11-03 09:58:43 WitVault

在React中顯示陣列數據onclick

回答

相關問題