基于Antd框架的通讯与交互

基于Antd框架的通讯与交互

一、与用户交互

对于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。

二、与后端交互

在完成上述用户对每一个页面的参数修改之后，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先后端的通讯基本流程介绍完了。