react系列--antd使用(1)

1.Checkbox.Group设置初始值

问题场景

编辑信息时,需要在弹框中把原始信息选中的选项勾选上,而添加信息时通常不需要选中任何选项

一般的表单域(如Input输入框)设置初始值可以使用setFieldsValue,但是多选项Checkbox.Group通过这样的方式却行不通(PS:我试过很多次没有成功,若哪位大侠知道如何通过setFieldsValue方式给多选框设置初始值希望能够告诉,感激不尽),所以我改变策略通过获取state的值来设置初始值

在renderModal函数中

  <Checkbox.Group 
   options={typeOptions} //多选框所有的可选项
   value={this.state.defaultOptions}
   onChange={this.typeOnChange.bind(this)}
  />

在state中

state = { ..., defaultOptions = []};

在函数typeOnChange中

typeOnChange(checkedValues) {
    this.setState({
        defaultOptions: checkedValues
    });
}

在编辑信息的函数onEdit中

function onEdit(record) {
    let arr = [];
    for( let i=0;i<record.tags.length; i++){
       //options就是原始信息记录中关于多选框选中的值,是一个数组
       arr.push( record.options[i].toString( ));
    }
    //其他可以通过setFieldsValue设置初始值的表单域就在这里进行设置
    this.setState({
        editRecord: record,
        defaultOptions: arr,
        edit: true
    },this.openModal());//openModal是一个打开弹框的函数
}

2.sessionStorage在页面之间传递参数

需求是a页面中的数据比较多,需要分页显示.在a页面某页中的某条数据上点击编辑时跳转到b页面,点击b页面中的返回时回到跳转前的分页

本想使用?后面的查询参数实现,但是想了下这样URL中携带了其他信息,所以就使用sessionStorage来实现.特别注意:sessionStorage只有在该tab页面被关闭时才会销毁,所以单纯地从sessionStorage中取数据可能导致在目录中切换到其他页面再回到a页面时首次不是显示的第1页.

完整代码

//a页面
componentDidMount(){
    if (!window.seesionStorage) {
        alert('该浏览器不支持seesionStorage!');
    } else {
        let pageNum = window.sessionStorage.getItem('pageNum') || 1;
        this.searchList(Number(pageNum));//必须转成数字,否则Pagination中当前页码无法显示
        window,sessionStorage.setItem('pageNum', 1);//这一步是关键,若不是从b页面跳转到a页面时,pageNum的值始终为1.此时,刷新页面时显示的是第一页
    }
}
handleEdit() {
    if (!window.seesionStorage) {
        alert('该浏览器不支持seesionStorage!');
    } else {
        window,sessionStorage.setItem('pageNum', this.state.page);//把当前页码设置为pageNum
    }
    //其他业务逻辑
}
    // b页面
    handleBack() {
        window.history.back(-1);
    }