一、数据绑定

类似 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的“模板语法”的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。