2019-10-14培训管理---考试管理部分注意事项

2019-10-14 本文已影响0人菩灵

题库中心页面，题库分类字典的option的value需要请求过来渲染
学习新知识——添加option的方法是：
dictTypeOtherList.map

建立连接：
@connect(({dictionary}) => ({dictionary}))

引入option值的列表
const { dictionary:{dictTypeList,dictTypeOtherList}, } = this.props

<FormItem label="检查类型">
        {getFieldDecorator('patrolCheckType', {})(
         <Select placeholder="请选择检查类型" style={{ width: '100%' }} allowClear>
           {dictTypeOtherList.map(item => (
             <Option value={item.value} key={item.value}>
                {item.name}
            </Option>
             ))}
        </Select>
      )}
 </FormItem>

由此可知：dictTypeOtherList是一个数组，里面的每一个对象具有value和name属性

注意return后面接JSX语法的书写形式：

return接JSX语法的书写原则
ant-design的栅格共24份，同一<Row>里面的栅格md等值决定了所占的份数
Input框自动获取焦点的属性autoFocus，官方文档竟然没写，webStorm自动提示了这个属性，经测试，确实可以自动获取焦点，使用场景——新建页面或者列表查询页面，编辑页面不适合，因为不能确定用户是否真的需要编辑
空值校验：render: (text) => text || "无" return只有一个语句，可以不加()或者{}
有状态组件向无状态组件过渡步骤：
1、无状态组件特性：没有自己的状态（state），从父组件继承props，没有生命周期
2、在方括号中的函数或者变量需要使用const进行定义
columns的每一行除了text，record外，还有一个属性是index，从0开始计数，可以render:(text,record,index) => index+1增加序号列（key值可以随便写或者置空，建议置空）--->新思路：给每一行绑定key的时候可以key=index+1，而不需要state中进行双向设置
针对Input和TextArea输入长度的限制，不光可以用validateField表单验证，同时加上maxLength="16"属性进行限制会更加严谨，16针对英文字符和中文字符同样生效
数据库问题汇总：
1、所有模块删除功能直接传入逗号分隔的字符串无效
2、提交题库的格式有待确认
3、查询题库分类KeyWord查到的是题库分类描述而不是题库分类名称
4、查询题库返回的questionBankId都是null，提交倒是可以正常提交
5、新建题库页面选择题库种类，需要获取全部题库种类，需要新的接口
注意bug，题库分类默认请求的时候是size=10，current=1，page=x，这对于题库分类列表来说是满足要求的，但是在新增培训的时候，我们需要获取到全部的培训分类值，如何获取total培训分类列表----->传参size=total似乎可以
坑：componentDidMount里面执行的dispatch请求是异步的，有时候页面需要渲染对应值，但是异步跟不上，页面就会首选model文件中state的默认值，如果state上面值的形式对不上，就会undefined阻塞之后的执行，为了防止这个问题，需要在state中设置正确的默认空值的格式，然后在主页面对需要进行渲染的数值做存在校验

  componentDidMount() {
    const { dispatch } = this.props;

    // 获取题库列表
    dispatch({
      type: 'questionBank/fetch',
    });

    // 获取题库分类列表
    dispatch({
      type:'questionBank/fetchQuestionClassifyList'
    })
  }

    questionClassifyObj:{
      records:[]
    }, // 题库分类返回数据

    { questionClassifyObj && questionClassifyObj.records && questionClassifyObj.records.map((item) => (
    <Option value={item.questionBankClassificationId} key={item.questionBankClassificationId}>{item.classificationName}</Option>)) }

表格属性rowKey问题的解决，有些场景不需要在DataSource中为rowKey保留一个字段，可以返回一个函数，用index代替

行不通：不知道这个id是哪来的
<Table columns={columns} dataSource={data} rowKey="id" />
rowKey : record => record.dataIndex,
或者
rowKey : (record,index)=> index
或者：
rowKey={(r,i)=>(i)}
解决：
<Table style={{ marginTop: 20 }} columns={clientColumns} dataSource={logItems} rowKey={(record, index) => index} pagination={false} bordered scroll={{ x: true }} />

Object.keys()方法使用

在实际开发中，我们有时需要知道对象的所有属性，原生js给我们提供了一个很好的方法：Object.keys()，该方法返回一个数组
传入对象，返回属性名
var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj)); //['a','b']

var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]

var obj2 = Object.create({}, { getFoo : { value : function () { return this.foo } } });
obj2.foo = 1;
console.log(Object.keys(obj2)); // console: ["foo"]

传入字符串，返回索引
var str = 'ab1234';
console.log(Object.keys(obj)); //[0,1,2,3,4,5]

构造函数返回空数组或者属性名
function Pasta(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.toString = function () {
return (this.name + ", " + this.age + ", " + this.gender);
}
}

console.log(Object.keys(Pasta)); //console: []

var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

数组返回索引
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]
————————————————
原文链接：https://blog.csdn.net/u014035151/article/details/53135610

关于正确选项的处理：先给每一个选项增加questionBankQuestionOptionsRight属性，在提交得时候进行遍历，根据值的不同，修改这个属性值，或者根据index或者select${index}直接给对应选项赋值
切换单选、多选和判断的时候，布局清空，state中选项和数据列表重新赋值，页面所有表单数据清空

defaultValue和initialValue不能同时使用

找找看，其他被getFieldDecorator包裹的组件没有有设置defaultValue.包括Select等。有的话都改为initialValue

如果需要设置不同项的state值，需要使用回调函数

回调函数处理两种数据改变
文件上传限制类型：<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
限制上传

Valid Accept Types:

For CSV files (.csv), use:

<input type="file" accept=".csv" />

For Excel Files 2003-2007 (.xls), use:

<input type="file" accept="application/vnd.ms-excel" />

For Excel Files 2010 (.xlsx), use:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

For Text Files (.txt) use:

<input type="file" accept="text/plain" />

For Image Files (.png/.jpg/etc), use:

<input type="file" accept="image/*" />

For HTML Files (.htm,.html), use:

<input type="file" accept="text/html" />

For Video Files (.avi, .mpg, .mpeg, .mp4), use:

<input type="file" accept="video/*" />

For Audio Files (.mp3, .wav, etc), use:

<input type="file" accept="audio/*" />

For PDF Files, use:

<input type="file" accept=".pdf" />

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

2019-10-14培训管理---考试管理部分注意事项

Object.keys()方法使用

Valid Accept Types:

猜你喜欢

热点阅读