加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:29:51 所属栏目:百科 来源:网络整理
导读: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‘ ; cons

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>

    )

}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读