React中,map出來的元素添加事件無法使用

標籤：

在使用react中，經常用到react的map函數，用法和jquery裡中的map一樣，但是，如果你在每個map出來的元素中添加，你會發覺添加的事件無法關聯，

比如，我們很多的評論，我需要在每個評論下面加一個回複的input,input期初是隱藏的，當我點擊每天評論下面的回複時，input輸入框顯示

 

這裡舉個例子，比如我數組裡有三組文字，我把它們渲染到li中，點擊每個li,alert()出每個li裡面的內容，按照下面的方法，你會發覺出錯，無法顯示

var myTest = React.createClass({ handleChange: function(item) { console.log(item);},     render: function () { var showArry = [‘hello1‘, ‘hello2‘, ‘hello3‘]; return ( <ul>{ showArry.map(function (item) { return <li onClick={this.handleChange.bind(this.item)}>{item}</li>;}) } </ul>); });React.render(<myTest/>, document.body);

　　

正確的方法是，不要在map的時候進行return。而是先將map的結果儲存到一個變數，比如我們可以把它們儲存在一個數組裡，然後我return這個數組。這樣就可以達到我們的效果了，代碼如下：

var myTest = React.createClass({ handleChange: function(item) { console.log(item);},     render: function () { var showArry = [‘hello1‘, ‘hello2‘, ‘hello3‘]; var newArry=[];for(var i=0;i<showArry.length;i++){var item=showArry[i];return newArry.push(<li onClick={this.handleChange.bind(this.item)}>{item}</li>)}return ( <ul>{newArry} </ul>); });React.render(<myTest/>, document.body);

　　

 

React中,map出來的元素添加事件無法使用