基于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前后端的通信基本流程介绍完了。