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