一、數據綁定

類似 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的“模板语法”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。