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)的更多相关文章

  1. GridView点击行触发SelectedIndexChanged事件

    1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protec ...

  2. easyui datagrid取消点击行的选中事件

    http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...

  3. element表格点击行即选中该行复选框

    关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...

  4. React躬行记(5)——React和DOM

    React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的rea ...

  5. React躬行记(13)——React Router

    在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...

  6. React躬行记(15)——React Hooks

    Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...

  7. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  8. 点击按钮文字变成input框,点击保存变成文字

    <!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...

  9. 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部

    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...

随机推荐

  1. Docker Swarm Mode 学习笔记 (部署服务)

    使用 docker service 命令来管理 Swarm 集群中的服务,该命令只能在管理节点上执行. 新建服务 docker service create --replicas 3 -p 80:80 ...

  2. idea使用的小技巧总结

    1.需要一个快捷清爽的控制台? 下面这段配置是你需要的,在workspace.xml里面添加 <component name="RunDashboard"> <o ...

  3. selenium+unittest自动化测试

    学了unittest+接口测试后,又试着用框架去做UI测试.感觉还是很好用的. 项目里该有的基本都有了,供以后扩展学习做个参考. 链接:https://github.com/Mollylin0/mon ...

  4. 支持向量机(Support Vector Machine):超平面

    超平面 超平面是 $n$ 维空间的 $n-1$ 维子空间,类似二维空间的直线,三维空间的平面. 分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面,将不同类别的样本分开.以二维空间为例 ...

  5. Mybatis映射文件中#取值时指定参数相关规则

    Mybatis映射文件中#取值时指定参数相关规则 在#{}中,除了需要的数值外,还可以规定参数的一些其他规则. 例如:javaType,jdbcType,mode(存储过程),numericScale ...

  6. 为wordpress后台登陆添加算术验证码

    对于新建站(个人博客-柠檬https://ninmong.com)的站长来说提高后台的安全性,是一件非常重要的事,添加验证可以起到很好的效果,废话少说,贴代码 //后台登陆数学验证码 function ...

  7. Cannot resolve classpath entry: /Program Files/IBM/SQLLIB/java/db2java.zip

    在mybatis的逆向工程中,使用java代码和xml配置文件生成时出现以下的错误 原来自己在复制官方配置文件的参考时将这一句也复制了进来 删掉后运行即可!成功的话控制台是没有输出的

  8. 如何在开发过程中获取客户端的ip呢?

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...

  9. js斐波那契数列

    斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...... 这个数列从第3项开始,每一项都等于前两项之和. 1.递归算法: function ...

  10. VMware虚拟机安装CentOS 6.9图文教程

    1.Win7安装VMware虚拟机比较简单,直接从官网下载VMware安装即可,这里不再叙述. 2.接着从CentOS官网直接下载CentOS 6.9的iso镜像文件. 3.打开VMware,点击创建 ...