refactor(a-form): Select 改为函数组件

miaoxing · Jun 29, 2022 · 2d0e41f · 2d0e41f
1 parent c85eac6
commit 2d0e41f
Showing 1 changed file with 28 additions and 33 deletions.
diff --git a/Select.js b/Select.js
@@ -1,47 +1,42 @@
-import { Component } from 'react';
 import {Select as AntdSelect} from 'antd';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
 
 const {Option} = AntdSelect;
 
-class Select extends Component {
-  renderOptions() {
-    let options = [];
+const renderOptions = (props) => {
+  let opts = [];
 
-    if (this.props.firstLabel) {
-      const firstValue = typeof this.props.firstValue !== 'undefined' ? this.props.firstValue : 0;
-      options.push(<Option key={firstValue} value={firstValue}>{this.props.firstLabel}</Option>);
-    }
-
-    if (this.props.all) {
-      options.push(<Option key="" value="">全部</Option>);
-    }
+  if (props.firstLabel) {
+    const firstValue = typeof props.firstValue !== 'undefined' ? props.firstValue : 0;
+    opts.push(<Option key={firstValue} value={firstValue}>{props.firstLabel}</Option>);
+  }
 
-    const isArray = Array.isArray(this.props.options);
-    map(this.props.options, (option, key) => {
-      if (typeof option === 'object') {
-        options.push(<Option key={option[this.props.valueKey]} value={option[this.props.valueKey]}>
-          {option[this.props.labelKey]}
-        </Option>);
-      } else if (isArray) {
-        options.push(<Option key={option} value={option}>{option}</Option>);
-      } else {
-        options.push(<Option key={key} value={key}>{option}</Option>);
-      }
-    });
-
-    return options;
+  if (props.all) {
+    opts.push(<Option key="" value="">全部</Option>);
   }
 
-  render() {
-    const {options, labelKey, valueKey, all, firstLabel, firstValue, ...props} = this.props;
+  const isArray = Array.isArray(props.options);
+  map(props.options, (option, key) => {
+    if (typeof option === 'object') {
+      opts.push(<Option key={option[props.valueKey]} value={option[props.valueKey]}>
+        {option[props.labelKey]}
+      </Option>);
+    } else if (isArray) {
+      opts.push(<Option key={option} value={option}>{option}</Option>);
+    } else {
+      opts.push(<Option key={key} value={key}>{option}</Option>);
+    }
+  });
 
-    return <AntdSelect {...props}>
-      {this.renderOptions()}
-    </AntdSelect>;
-  }
-}
+  return opts;
+};
+
+const Select = ({options, labelKey, valueKey, all, firstLabel, firstValue, ...props}) => {
+  return <AntdSelect {...props}>
+    {renderOptions({options, labelKey, valueKey, all, firstLabel, firstValue})}
+  </AntdSelect>;
+};
 
 Select.defaultProps = {
   labelKey: 'label',