react state中的数组,能否使用数组中某个元素绑定某个dom状态?

发布于 2022-09-06 21:36:00 字数 669 浏览 12 评论 0

state里面的设置:this.state = {checkList:[]};

checkList开始就给它初始化了一个长度和JsonPage相同的数组:this.setState({checkList:checkSaveCount});//checkSavaCount长度和下面的JsonPage相同。

以下创建一组Checkbox,check属性设为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更新它本身状态,行得通吗,setState 怎么写,如果外面有一个全选checkbox,点击为全选时,setState这个checkList为一个所有值都为true的数组时,以上创建的组件的状态会全部更新吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

漫雪独思 2022-09-13 21:36:00

请不要用jQuery的思想来使用React。
React中没有dom的概念,一切皆数据。
你那代码应该是这样的:

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>
        );
    }
}
秋凉 2022-09-13 21:36:00

不能,react已经给你jsx语法了,不要再用原生思想去理解

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文