使用飞冰组件关于点击行回填在input内(React)
import { Table,Grid } from "@icedesign/base";
import { FormBinderWrapper as IceFormBinderWrapper, FormBinder as IceFormBinder, FormError as IceFormError, } from '@ali/ice-form-binder';
import IceEvents from '@ali/ice-events';
const { Row, Col } = Grid;
//IceFormBinderWrapper的value值就是接收到的点击行的值,这个组件有一个双向绑定的属性,所以直接设置value就可以了
@IceEvents
export default class Demo extends Component {
constructor(props){
super(props);
this.state = {
queryTableData:{}
}
}
componentDidMount(){
this.queryTableData(this.state.queryTableData)
//一般来讲table组件和input组件是两个页面,今天放在一个里面了,所以写法还是按两个组件的方式来写的,用了事件通信
this.on("clickRowData",(e,data)=>{
//再次发送ajax,把当前行的id传回去,会拿到一个response,把这个结果放进state里面
this.setState({
InputData:res
})
})
}
queryTableData = (vale) =>{
//ajax拿到数据,扔进state里面
如:this.setState({
tableData:res
})
}
ChangeRowClick = (record,e,index) =>{
this.emit("clickRowData",e,record);
}
render(){
return(
<IceFormBinderWrapper
value={this.state.InputData}
>
<Row>
<Col>
<Table
dataSource={this.state.tableData}
onRowClick={this.ChangeRowClick}
>
<Table.Column dataIndex="对应字段名,比如title" />
</Table>
</Col>
<Col>
<IceFormBinder>
<Input name="对应字段名,比如title"/>
</IceFormBinder>
</Col>
</Row>
</IceFormBinderWrapper>
)
}
}
使用飞冰组件关于点击行回填在input内(React)的更多相关文章
- GridView点击行触发SelectedIndexChanged事件
1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protec ...
- easyui datagrid取消点击行的选中事件
http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...
- element表格点击行即选中该行复选框
关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...
- React躬行记(5)——React和DOM
React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的rea ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
- React躬行记(15)——React Hooks
Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 点击按钮文字变成input框,点击保存变成文字
<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
随机推荐
- linux基础之加密解密、PKI及SSL、创建私有CA
加密解密基础 1. 对称加密: 加密和解密使用同一个密钥 常见的加密算法有:DES.3DES.AES.Blowfish.Twofish.IDEA.RC6.CAST5 特性: 1. 加密.解密使用同一个 ...
- Swagger和Postman的配置和使用
Swagger 1. 配置 pom文件添加swagger依赖,注意版本,2.8.0可以使用 <dependency> <groupId>io.springfox</gro ...
- ZJOI 2017 树状数组(线段树套线段树)
题意 http://uoj.ac/problem/291 思路 不难发现,九条カレン醬所写的树状数组,在查询区间 \([1,r]\) 的时候,其实在查询后缀 \([r,n]\) :在查询 \([l,r ...
- vue--js里跳转页面
我们知道在vue里进行页面跳转的话,我们使用<router-link>这个标签 那在构造函数里我们不能直接操纵DOM元素,我们又该如何进行页面跳转呢? 步骤1: 我们先在DOM里设置三个按 ...
- 在 Laravel 项目中使用 Elasticsearch 做引擎,scout 全文搜索(小白出品, 绝对白话)
项目中需要搜索, 所以从零开始学习大家都在用的搜索神器 elasiticsearch. 刚开始 google 的时候, 搜到好多经验贴和视频(中文的, 英文的), 但是由于是第一次接触, 一点概念都没 ...
- 提供HTML5播放RTSP流 提供微信播放RTSP流 HTML5支持rtsp web播放rtsp,微信支持rtsp
首先H5的video不支持RTSP播放,以下是html5的video官方介绍 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(O ...
- .Net Core 管道中的ConfigureServices 和Configure
ConfigureServices 就是配置服务器的DI容器 把需要的中间件等一些东西添加到DI容器 最后都是添加到IServiceCollection里面 比如 services.AddI ...
- 实验十一 团队项目设计完善&编码测试
任务一: 根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明,将完善后内容以<XX团队项目软件设计方案>为名发布在团队博客中,博文中要突出对完善内容的陈述说明,修改部 ...
- 分页查询最好加排序(order by)
昨天,与外部化系统对接时,发现有一个数据一直咩有集成到,双方各自排查了自己系统的代码,都觉得逻辑非常简单,无法就是一个分页查询而已. 问题就出在这个分页查询上. 为了说明当时问题发生的情景,我模拟了一 ...
- LRU算法的Java实现
LRU全称是Least Recently Used,即最近最久未使用的意思. LRU算法的设计原则是:如果一个数据在最近一段时间没有被访问到,那么在将来它被访问的可能性也很小.也就是说,当限定的空间已 ...