在使用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);