@aligov/gov-department-field

department field

@aligov/gov-department-field

政务部门组件，作为表单中的一个字段。

推荐作为受控组件使用，即传value和onChange

Install

(t)npm i @aligov/gov-department-field -S

API

value: [{ text: string; value: string }]

依赖

接口一:

Usage

1. 普通受控用法

  import GovDepartment from '@aligov/gov-department-field';

  export default class Department extends Field {
  static displayName = 'Department';

  static defaultProps = {
    componentId: null,
    content: null,
    style: null
  };

  static propTypes = {
    componentId: React.PropTypes.string,
    content: React.PropTypes.string,
    style: React.PropTypes.object
  };

  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
  }

  onChange(data) {
    const { onChange } = this.getControlProps();

    if (onChange) {
      onChange(data);
    }
  }

  render() {
    const { value } = this.props;
  
    return <GovDepartment {...this.props} value={value} onChange={this.onChange} />;
  }
}

2. formily注册自定义组件用法

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { SchemaForm, SchemaMarkupField as Field, useSchemaProps } from '@formily/antd' // 或者 @formily/next
import GovDepartment from '@aligov/gov-department-field';
 
import 'antd/dist/antd.css'


const CustomFieldComponent = props => {
  const schemaProps = useSchemaProps()
  return (
    <GovDepartment
      value={props.value || ''}
      onChange={e => props.mutators.change(e.target.value)}
    />
  )
}

CustomFieldComponent.isFieldComponent = true

const App = () => {
  const [value, setValue] = useState({});
  return (
    <SchemaForm
      components={{ CustomFieldComponent }}
      onChange={values => {
        setValue(values)
      }}
    >
      <Field
        type="string"
        name="lastName"
        title="Last Name"
        x-component="CustomFieldComponent"
      />
      {JSON.stringify(value, null, 2)}
    </SchemaForm>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))