有关react的组件表单及antd中常见的问题

刚开始实习,
如有写的不对的地方,还望见谅并希望能够及时指正 共同进步,谢谢！

一：写在周期函数中的方法在父组件加载的同时已被加载 原因如下：
控制组件的显示与隐藏有两种方法
1>控制子组件的visible(boolean)，从而控制显示与隐藏，而这时子组件会随着父组件的加载而加载，只是显示与隐藏的问题。所以子组件中周期函数的方法在父组件加载的同时已经被加载了。
例如：
<UpdateTrack visible={visible === Visible.UpdateTrackVisible} close={this.handleOpenClose} id={id} />
2>在组件外部加层判断先去判断子组件是否需要显示，选择性的加载子组件，所以子组件中的周期函数只有在子组件需要加载时，才会调用
例如：
{visible === Visible.salesPrice && ( <SalesPriceModal visible={visible === Visible.salesPrice} onClose={showHideModal.bind(this, Visible.none)} /> )}

情景：如果需要每一次加载子组件的同时刷新数据，此时需要第二种方法。

二：受控组件及非受控组件
react的受控组件及非受控组件
1>受控组件:其值由React控制的输入表单元素成为“受控组件”。特点：设置value值，value由state控制，value的值一般在onChange事件中通过setState进行修改。
2>非受控组件表单数据由DOM处理的组件。特点：不设置value值，通过f获取dom节点然后再获取value值
所以一般情况下 某些组件value和defaultValue 一般不同时存在
使用场景：当任何时候不需要手动去改变组件的value值，这时使用非受控组件
所以在本次封箱标签的添加中 input和datapicker需要手动使用setState设置及清空value所以使用的是受控组件
而switch开关不需手动干涉组件的value而且需要使用defaultvalue设置初始值所以是非受控组件

三：如何获取input表单元素中实时改变的value
使用onchange函数 e.target.value表示输入框中的值

三：antd表格中每条数据都应该有独一无二的key
官文：按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果 dataSource[i].key 没有提供，你应该使用 rowKey 来指定 dataSource 的主键！！！

如果后台接口没有提供独一无二的rowKey 那么则需要自己手动添加id
方法如下
思路：自己创建一个新的数据结构，去继承已经提供的后台接口数据库，成为新的数据类型。 然后再为每一条数据添加id字段时，可以通过foeach和map遍历数组的方法，
例如：
后台已经提供的接口数据

export interface ExchangeRateLogModel {
    currencyCode?: string;
	/**
	 * @pattern ^\d+$
	 */
    operationTime?: string;
    createBy?: string;
    remark?: string;
}

此时并没有id
然后手动创建新的数据类型,继承原有的数据类型
例如：

interface LogModelWithId extends ExchangeRateLogModel {
	id: number;
}

此时LogModelWithId数据中，已经存在了ID
然后调用接口获取所有数据后，此时想为antd的表格添加rowkey设为id,
通过map和foreach遍历的方法进行设置

@action
	findLogList = async (id, currencyCode) => {
		try {
			let newList: LogModelWithId[] = [];
			const resp = await findExchangeRateLog({ id });
			const result = resp.data || [];
			runInAction(() => {
				result.forEach((item, index) => {
					newList.push({
						...item,
						currencyCode,//添加自己需要的字段
						id: index
					});
				});
				this.logList = newList;
			});
		} catch (err) {
			message.error(err.message);
			runInAction(() => {
				this.list = [];
			});
		}
	};

通过map的方式添加

	@action
	findLogList = async (id, currencyCode) => {
		try {
			let newList: LogModelWithId[] = [];
			const resp = await findExchangeRateLog({ id });
			const result = resp.data || [];
			runInAction(() => {
				result.map((item,index)=>{
					...item,
					currencyCode,
					id:index
				}
				this.logList = result;
			});
		} catch (err) {
			message.error(err.message);
			runInAction(() => {
				this.list = [];
			});
		}
	};

四：antd的select选择框value,如果需要进行对selec选择的value进行处理，如果没有即时的将value通过onChange函数进行处理，那么通过getFieldValue获取到的值是上一次选择的值，并不是即时的。

所以如果需要对select下拉框里的选项即时做处理的话,则需要把value传给onChange函数

五：antd的Modal中的confirmLoading属性
作用可以防止重复点击确定按钮

<Modal
					title="修改时段"
					visible={visible}
					onOk={() => this.modifyPeriods()}
					onCancel={() => {
						if (!isloading) {
							close();
						}
					}}
					afterClose={() => this.props.form.resetFields()}
					confirmLoading={isloading}
				>
					<FormItem label={"时段"} {...formItemLayout}>
						{getFieldDecorator("sendPeriod", {
							rules: [
								{
									required: true,
									message: "请选择一个时段!"
								}
							],
							initialValue: ""
						})(
							<Select style={{ width: 200 }} showSearch optionFilterProp="children">
								{SpidermanSendPeriods.map((item, index) => {
									return (
										<SelectOption key={index} value={item.value}>
											{item.label}
										</SelectOption>
									);
								})}
							</Select>
						)}
					</FormItem>
				</Modal>

在点击确定按钮后直接按钮直接进入loading状态

父子组件传值-----子组件向父组件传值
实例：
在父组件中 定义变量以及处理该变量的函数


在子组件中