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>
- )
- }
- }
来源: http://www.bubuko.com/infodetail-2603566.html