一、数据绑定

类似 Vue 的 v-model，

        this.state = {            val: 1,            companies: ["阿里巴巴", "腾讯", "百度", "京东"],        };companyNameUpdate(e) {        this.setState({            companyName: e.target.value        })    }

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

一、遍历

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

{ this.state.list.map((item,index)=>{ return {item} }) }

三、绑定事件

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

增加公司

四、附代码

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 (            增加公司                {this.state.companies.map((item, index) => {                    return

{item}

})} ) }}export default ParentTest;

easyui中onchange事件_React中类似Vue的“模板语法”相关推荐

[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...
Vue的模板语法及案例
文章目录前言一.双大括号表达式二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式三.指令 3.1 参数 3.2 动态参数 3.3 修饰符四.指令 ...
【Vue】—Vue的模板语法
[Vue]-Vue的模板语法在template中写HTML时,如果需要渲染变量或者表达式,可以使用{{ }}形式来渲染,这个{{ }}就是模板语法,可以把变量或者表达式的结果渲染出来. 模板语法渲染 ...
JS中onchange事件:域内容被改变的事件
大炮最近复习js的事件复习onchange事件的时候做了一个,城市和区的二级联动的菜单,和大家分享一下 onchange:域内容被改变的事件需求:实现二级联动 <body>This is ...
react中onchange事件
如何获取输入框的值是react中必须面对的问题,目前比较好的方式与两种,一种是使用ref,而另一种是使用onChange事件,它通过事件对象的方式获取输入值. 具体使用方式如下: class Main ...
js中onchange事件举例用法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>举例示 ...
html下拉框onchange事件,javascript 中select标签上放入onchange事件的两种方式分享
摘要: 下文讲述在html标签select上放入onchange事件的方式分享,如下所示: 例1: maomao365.com js select上直接使用onchange的方法 function s ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
【Vue】模板语法 —— 表达式、插值、指令
简介模板语法大家多少都有所接触,例如百度模板引擎.ejs 等等同样 Vue.js 也使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据所有 Vue.j ...

easyui中onchange事件_React中类似Vue的“模板语法”

一、数据绑定

一、遍历

三、绑定事件

四、附代码

easyui中onchange事件_React中类似Vue的“模板语法”相关推荐

最新文章

热门文章