使用飞冰组件关于点击行回填在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",record); render(){ return( <IceFormBinderWrapper value={this.state.InputData} > <Row> <Col> <Table dataSource={this.state.tableData} onRowClick={this.ChangeRowClick} > <Table.Column dataIndex="对应字段名,比如title" /> </Table> </Col> <IceFormBinder> <Input name="对应字段名,比如title"/> ? </IceFormBinder> </Row> </IceFormBinderWrapper> ) } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |