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. Bootstrap3基础 引入本地的bootstrap

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. JS高程关于ajax的学习笔记

    1.ajax介绍 ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面,就可以从服务器中获取需要的数据. ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR对象为向服 ...

  3. STM32的PA15、PB3、 PB4管脚作普通管脚的解决办法

      最近做了一个板子,使用的是SWD方式进行下载程序,仅仅使用到SWDIO(PA13) 和SWCLK(PA14)两个管脚.我将PA15(JTDI)和PB3(JTDO)管脚用于他用(用于点LED使用), ...

  4. <工厂方法>比<简单工厂>多了啥

    前言:多注重设计.仅当复习讨论! 简单工厂模式 UML图   假如有一位爱心人士,想给饥饿的流浪动物喂食.此时爱心人士身带了狗粮,但是他到处找啊找,最终只找到了猫大人,是不是有点惨兮兮.但是如果有简单 ...

  5. java基础学习之"堆" "栈" "静态存储区" "方法区"

    引用部分 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里,局部变量放哪里,静态区在哪里.....进来) Java堆.栈和常量池以及相关String的讲解 等我看完"深入理 ...

  6. Lintcode85-Insert Node in a Binary Search Tree-Easy

    85. Insert Node in a Binary Search Tree Given a binary search tree and a new tree node, insert the n ...

  7. Confluence-6.10.0+Jira-7.13+Crowd-3.2.1最全破解文档,附下载包

    =========================================2019.4.19更改================================================ ...

  8. Antd Select组件结合使用出现must set key for <rc-animate> children问题

    一.以下情况可能导致错误发生 出现这个问题的首要条件是因为Select的mode 设置成multiple or tags 1. Select的defaultValue使用了空字符串 例如: const ...

  9. eclipse配置运行时变量

    说明:我这里是在执行测试方法是配置的环境变量 步骤: 选中测试方法 -> 右键 -> run as -> run configurations ->

  10. 自定义 Cordova插件(基础篇)

    cordova自定义插件 注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装 下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用 ...