聯動菜單也是我們常用功能之間，下面描述一下聯動菜單的一種實現。

一、功能描述：兩級聯動。

在選擇了集群中一項後，會將該集群下的key值都關聯出來。開發時在這裏遇到一個問題，卡了很久。遇到的問題：在上圖的狀態下，更換一級聯動的值，二級聯動的值依然會保留上一次的值。其實這個問題挺簡單的。就是在加載二級聯動值時先清除。重點還是在對ant的組件不了解，不會使用。

二、功能代碼

import React from ‘react‘;
import ‘../index.less‘;
import {Form, Row, Col, Input, Button, Select, Checkbox,message, notification} from ‘antd‘;
import request from ‘../../../utils/request.js‘;

const FormItem = Form.Item;
const Option = Select.Option;
const clusterData = [‘select an option‘, ‘man‘, ‘ware‘];

class HandleCache extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      cacheKeyData: [],
      belongCluster: "",
      cacheContent: "",
    }
  }

  handleClusterChange = (value) => {
    //先清除之前加載的數據
    this.props.form.setFieldsValue({cacheKey: ""});
    const url = `...`;  //訪問url
    const hide = message.loading(‘正在查詢...‘, 0);
    const obj = {};
    obj.belongCluster = value;
    request.POST(url, obj)
      .then(resp => {
        hide();
        const result = JSON.parse(resp);
        if (result.code === 100) {
          this.setState({
            cacheKeyData: result.data,
          })
        }
      })
      .fail(error => {
        hide();
        ...//失敗後的相關處理代碼
      })
  }

  handleCacheKeyChange = (value) => {
    const url = `...`;  //訪問url
    const hide = message.loading(‘正在查詢...‘, 0);
    const obj = {};
    obj.id = value;
    request.POST(url, obj)
      .then(resp => {
        hide();
        const result = JSON.parse(resp);
        if (result.code === 100) {
          this.props.form.setFieldsValue({cacheKey: result.data.cacheKey});
          this.setState({
            belongCluster: result.data.belongCluster,
          })
        }
      })
      .fail(error => {
        hide();
        ...
      })
  }

 render() {
    const {getFieldDecorator} = this.props.form;
    const clusterOptions = clusterData.map(cluster => <Option key={cluster}>{cluster}</Option>);
    const cacheKeyOptions = this.state.cacheKeyData.map(option => <Option key={option.key}>{option.value}</Option>);
    return (
      <div>
        <Form className="ant-advanced-search-form">
          <Row>
            <Col>
              <FormItem
                label="所屬集群" labelCol={{span: 4}} wrapperCol={{span: 8}}>
                {getFieldDecorator(‘belongClusters‘, {
                  initialValue: clusterData[0],
                  rules: [{required: true, message: ‘Please select cluster!‘}],
                })(
                  <Select onChange={this.handleClusterChange}>
                    {clusterOptions}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem
                label="key值" labelCol={{span: 4}} wrapperCol={{span: 8}}
              >
                {getFieldDecorator(‘cacheKey‘, {
                  rules: [{required: true, message: ‘Please input cacheKey!‘}],
                })(
                  <Select onChange={this.handleCacheKeyChange}>
                    {cacheKeyOptions}
                  </Select>
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }

}
HandleCache = Form.create()(HandleCache);
export default HandleCache;

　　三.坑點提示

　　1.Select下的Option使用需要定義const Option = Select.Option;

2.一級聯動的值少，可以直接在頁面中確定，不需要訪問後臺去獲取。實現代碼關鍵：map()方法可循環遍歷數組，進行每一項的處理。

const clusterData = [‘select an option‘, ‘man‘, ‘ware‘];
const clusterOptions = clusterData.map(cluster => <Option key={cluster}>{cluster}</Option>);

const cacheKeyOptions = this.state.cacheKeyData.map(option => <Option key={option.key}>{option.value}</Option>);

　　4.在一種描述的問題可通過this.props.form.setFieldsValue({cacheKey: ""});這個方法先清除值，再加載即可。

項目實戰之FORM、聯動菜單組件的實現