基于Antd框架的通信与交互
基于Antd框架的通信与交互
1、与用户交互
对于input输入框，在于用户交互的过程中，用户在输入任何东西时，都会引起该组件的onChange事件（如果写有这个方法的话）。
<FormItem
{...formItemLayout}
style={{ display: getFieldValue('type') === '活动' ? 'none' : 'block' }}
label={<span>跳转网址</span>}
>
<Input
id="target"
placeholder="活动无需输入网址"
onChange={e => {
this.onChange1(e);
}}
style={{ width: 300 }}
/>
</FormItem>
可以看到，input输入框一般放在表单里，所以用FormItem将他框起来，在input组件的属性中，首先进行数据绑定，id就是用于和后端交互的数据（命名一定要匹配），不仅有使用id这个方法，我们还可以使用getFieldDecorator方法进行绑定（以后再介绍），然后是placeholder属性，这个属性是组件提示显示词。再就是style这个属性，自然不用介绍了，在formItem这个大的style展示之后，再进行细微的调整。最后就是onChange方法了，这里的写法可以看到，e这个参数可以任意取名，将e传到onChange方法，现在我们看看onChange方法。
onChange1 = e => {
console.log(e.target.value);
this.state.target = e.target.value;
};
这里我先将用户的输入打印出来，每次输入（哪怕是一个单词）都会引起该方法的调用，然后用
this.state=e.target.value
这个语句是将用户的输入传给该组件的状态state，那么无论输入什么，该网页的状态总是保持最新的状态（与用户保持一致）
要注意的是，state这个东西可以由我们自己创建，可以一个组件对应一个state，也可以多个组件对应一个state
<FormItem
{...formItemLayout}
label={<span>选择活动</span>}
style={{ display: getFieldValue('type') === '活动' ? 'block' : 'none' }}
>
<Select
id="target"
placeholder="选择活动"
style={{ width: 300 }}
onChange={e => {
this.handleActivity2(e);
}}
>
{list.map(it => (
<Select.Option key={it.id} value={it.title}>
{it.title}
</Select.Option>
))}
</Select>
</FormItem>
<FormItem
{...formItemLayout}
style={{ display: getFieldValue('type') === '活动' ? 'none' : 'block' }}
label={<span>跳转网址</span>}
>
<Input
id="target"
placeholder="活动无需输入网址"
onChange={e => {
this.onChange1(e);
}}
style={{ width: 300 }}
/>
</FormItem>
这段代码实现了组件动态关联（下面再介绍），可以看到，两个formItem里的组件：input和select都是绑定的‘target’这一state，共同实现对他的修改，下面看看handleActivity这一方法的实现。
handleActivity2 = e => {
console.log(e);
this.state.target = e;
};
这里我也有一点不懂的地方，为什么select组件在调用onChange方法的时候也是传e，但在方法体中，e才是用户的输入，而不是e.target.value。
2、与后端交互
在完成上述用户对每个页面的参数修改以后，state就是记录着这些数据，然后通过点击“确认”按钮，就可以提交表单了
<Button type="primary" htmlType="submit"loading={submitting}>
确定
</Button>
这里，htmlType属性在antd中是用来指定样式的，该按钮是蓝色的，loading属性和加载相关，和性能相关，这里不仔细叙述，确认按钮在antd中会自动绑定到handleSubmit这一方法，该方法的实现：
handleSubmit = e => {
const { dispatch } = this.props;
e.preventDefault();
if (this.refs.pics.state.fileList.length > 0)
this.state.image = this.refs.pics.state.fileList[0].response.url;
console.trace(this.state);
dispatch({
type: 'systemSetting/apiCreateRotation',
payload: {
image: this.state.image,
type: this.state.type,
target: this.state.target,
},
});
};
要想将数据传到后端，需要借助dispatch这一载体，该属性要想使用，一定要从this.props中取出来。之后是e.preventDefault语句，不加的话该方法不会有作用，在dispatch中，首先指定type，‘/’号的前面是model的名称，后面是model中的某个方法。payload则是具体载体，说明我该将哪些组件的state传给后端。下面给出model中调用的方法。
*apiCreateRotation({ payload }, { call, put }) {
const response = yield call(apiCreateRotation, payload);
if (isResponseSuccess(response)) {
message.success('创建成功');
yield put({
type: 'createsuc',
payload: response,
});
} else {
message.error('创建失败:' + response.message);
}
},
该方法使用call调用到了后端的接口，该思想就是基于服务的软件开发，即：你给我接口和相应的使用规则，我给你发送数据，然后将处理后的数据再传给我。有效实现了前后端的分离，降低耦合度，这也算是学以致用了吧，至此，antd前后端的通信基本流程介绍完了。
