使用飞冰组件关于点击行回填在input内(React)

标签：dal   ace   字段   tst   rom   ken   value   data-   wrap   

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)

标签：dal   ace   字段   tst   rom   ken   value   data-   wrap   

原文地址：https://www.cnblogs.com/lou-0820/p/9046421.html