- 题库中心页面，题库分类字典的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" />
网友评论