使用飞冰组件关于点击行回填在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>

　　　　)

　　}

}