基於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先後端的通訊基本流程介紹完了。