您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

React中类似Vue的“模板语法”

时间:2020-07-23 13:31:37  来源:  作者:
React中类似Vue的“模板语法”

 

一、数据绑定

类似 Vue 的 v-model,

        this.state = {
            val: 1,
            companies: ["阿里巴巴", "腾讯", "百度", "京东"],
        };


companyNameUpdate(e) {
        this.setState({
            companyName: e.target.value
        })
    }


<input value={this.state.companyName} onChange={this.companyNameUpdate}/>

本例中,由于 React 是单向数据绑定,所以还要额外增加 onChange 函数来实时获取输入框中的值

一、遍历

类似 Vue 的 v-for,通过 js 的 map 操作

            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li>{item}</li>
                    })
                }
            </ul>  

三、绑定事件

如使用 onClick,即点击时的事件,类似 Vue 的 @change

<button onClick={this.addCompany}>增加公司</button>

四、附代码

import React, {Fragment} from "react";

class ParentTest extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            companies: ["阿里巴巴", "腾讯", "百度", "京东"],
            companyName: ""
        };
        this.addCompany = this.addCompany.bind(this);
        this.companyNameUpdate = this.companyNameUpdate.bind(this)
    }

    addCompany() {
        this.setState({
            companies: [...this.state.companies, this.state.companyName],
            companyName: ""
        })
    }

    companyNameUpdate(e) {
        this.setState({
            companyName: e.target.value
        })
    }

    render() {
        return (
            <Fragment>
                <input value={this.state.companyName} onChange={this.companyNameUpdate}/>
                <button onClick={this.addCompany}>增加公司</button>
                {this.state.companies.map((item, index) => {
                    return <div key={index}>{item}</div>
                })}
            </Fragment>
        )
    }

}

export default ParentTest;


Tags:React   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: React  点击:(19)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: React  点击:(77)  评论:(0)  加入收藏
每个前端开发人员都听说过三个用于构建 Web 应用程序的框架:React、Vue.js和Angular。React 是一个 UI 库,Angular 是一个成熟的前端框架,而 Vue.js 是一个渐进式框架。它们几...【详细内容】
2021-08-25  Tags: React  点击:(96)  评论:(0)  加入收藏
领域驱动,各自只管各自的模块,顶层再来进行组装和分配...【详细内容】
2021-06-25  Tags: React  点击:(92)  评论:(0)  加入收藏
public class SReactorSThread { private Selector selector; private ServerSocketChannel serverSocketChannel; private int PORT = 6666; public SReactorS...【详细内容】
2021-05-25  Tags: React  点击:(779)  评论:(0)  加入收藏
为什么要从 Vue 转到 React,这篇文章为什么我们放弃了 Vue?不过对于大多数人来说,用 Vue 还是 React 不是自己说了算,多学一门技术不是坏处,而且 React 被大厂大量使用,要进入大厂...【详细内容】
2021-04-13  Tags: React  点击:(264)  评论:(0)  加入收藏
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式一、Reactor模式 Reactor 释义“反应堆”,是一...【详细内容】
2020-12-24  Tags: React  点击:(205)  评论:(0)  加入收藏
在我回答之前,如果你读这篇文章是为了选择一个“要学习”的框架,不要这样做。还是读读这篇文章吧。如果你想选择一个框架来使用(在一个实际的项目中),你可以继续:)“更好”是...【详细内容】
2020-11-03  Tags: React  点击:(88)  评论:(0)  加入收藏
在这篇文章中,我将分享我对React Hooks的观点,正如这篇文章的标题所暗示的那样,我不是一个忠实的粉丝。让我们来分析一下React官方的文档中描述的放弃类而使用钩子的动机。动...【详细内容】
2020-11-03  Tags: React  点击:(80)  评论:(0)  加入收藏
Netty 怎么切换三种 I/O 模式什么是经典的三种 I/O 模式?生活场景:当我们去饭店吃饭时:&bull; 食堂排队打饭模式:排队在窗口,打好才走;&bull; 点单、等待被叫模式:等待被叫,好了自己...【详细内容】
2020-10-13  Tags: React  点击:(101)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条