使用飛冰組件關於點擊行回填在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>

　　　　)

　　}

}