鍍金池/ 問答/HTML5  HTML/ react state中的數(shù)組，能否使用數(shù)組中某個元素綁定某個dom狀態(tài)？

react state中的數(shù)組，能否使用數(shù)組中某個元素綁定某個dom狀態(tài)？

state里面的設(shè)置：this.state = {checkList:[]};

checkList開始就給它初始化了一個長度和JsonPage相同的數(shù)組：this.setState({checkList:checkSaveCount});//checkSavaCount長度和下面的JsonPage相同。

以下創(chuàng)建一組Checkbox，check屬性設(shè)為this.state.checkList[i]，并綁定onChangeClick事件。
for(var i=1;i<JsonPage.length;i++)
{
var menuArr=[];
var chk=React.createElement(Checkbox,{id:""+i+"",checked:this.state.checkList[i],onChange:this.onChangeClick.bind(this)},JsonPage[i]);請輸入代碼
menuArr[i]=React.createElement(Menu.Item,{key:""+i+""},chk);
}

那么問題來了， 如何在onChangeClick更新它本身狀態(tài)，行得通嗎，setState 怎么寫，如果外面有一個全選checkbox，點擊為全選時，setState這個checkList為一個所有值都為true的數(shù)組時，以上創(chuàng)建的組件的狀態(tài)會全部更新嗎？

回答
編輯回答
小眼睛

不能，react已經(jīng)給你jsx語法了，不要再用原生思想去理解

2017年4月19日 05:31
編輯回答
過客

請不要用jQuery的思想來使用React。
React中沒有dom的概念，一切皆數(shù)據(jù)。
你那代碼應(yīng)該是這樣的：

class Example extends React.Component{
    constructor() {
        super(...arguments);
        this.state = {checkList: []};
    }
    
    render() {
        const {jsonPage = []} = this.props;
        let {checkList} = this.state;
        return(
            <div>
            {
                jsonPage.map(page => {
                    return(
                        <div key={page.id}>
                           <Checkbox checked={checkList.some(id => page.id === id)} onChecked={() => {                      
                               if(checkList.every(id => id !== page.id) {//選中
                                   checkList.push(page.id);              
                               } else {//取消
                                   checkList.splice(checkList.indexOf(page.id), 1);    
                               }
                               this.setState({checkList});
                           }}/>
                           <Menu />
                        </div>
                    );
                })
            }
            </div>
        );
    }
}
2017年8月28日 01:30