@aliretail/react-materials-components/demo/FormComponents/cascaderSelect.md

B 端物料组件库

---
title: CascaderSelect
order: 190
---

```jsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import { FormComponents } from '@aliretail/react-materials-components';
const {
  setup,
  SchemaForm,
  SchemaMarkupField: Field,
  createFormActions,
  FormEffectHooks,
  FormButtonGroup,
  Submit,
} = FormComponents;
setup();

let cache = {};

function App() {
  const [dataSource, setData] = useState([]);
  useEffect(() => {
    fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      })
      .catch((e) => console.log(e));
  }, []);
  return (
    <SchemaForm onChange={console.log} validateFirst>
      <Field
        title="级联选择(多选)"
        x-component="CascaderSelect"
        enum={dataSource}
        x-component-props={{
          showSearch: true,
          multiple: true,
          onChangeBak: (value, data) => { console.log(value, data) },
        }}
      />
      <Field
        title="级联选择(单选)"
        x-component="CascaderSelect"
        enum={dataSource}
        x-component-props={{
          showSearch: true,
        }}
      />
      <Field
        title="级联选择readOnly"
        x-component="CascaderSelect"
        enum={dataSource}
        default={'2975'}
        readOnly
      />
      <Field
        title="级联选择多选readOnly"
        x-component="CascaderSelect"
        enum={dataSource}
        default={['2975', '2973', '2974']}
        readOnly
        x-component-props={{
          multiple: true,
        }}
      />
    </SchemaForm>
  );
}

ReactDOM.render(<App />, mountNode);
```