修改控件

ant_components/BIInput/index.js

 import React from 'react';
 import { Input } from 'antd';
-import './style.less';
+import InconFont from '@/submodule/components/IconFont/IconFont';
+import styles from './style.less';
 
 const { TextArea } = Input;
 const Search = Input.Search;
@@ -12,15 +13,21 @@ const Password = Input.Password;
 * 只扩展自定义样式
 * */
 
-class BIInput extends React.Component {
-
-  render() {
+const BIInput = (props) => {
+  const onClear = () => {
+    if (props.onChange) {
+      props.onChange('')
+    }
+    if (props.onClear) {
+      props.onClear('')
+    }
+  }
   return (
-      <span className='BIInput'>
-        <Input {...this.props} />
-      </span>
+    <Input
+      suffix={props.value ? (<InconFont type="iconguanbi" className={styles.clearIcon} onClick={onClear} />) : null}
+      {...props}
+    />
   );
-  }
 }
 
 export default BIInput;

ant_components/BIInput/style.less

 @import "../config.less";
 
-:global .BIInput {
-  .ant-input {
-    border-radius: 4px;
-  }
-  .ant-input:hover {
-    //border: 1px solid @base-green;
-  }
-  .ant-input:focus{
-    //border: 1px solid @base-green;
-    //box-shadow: 0 0 0 2px @base-green-shadow;
-  }
-  .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
-    //border-color: @base-green;
-  }
+.clearIcon{
+  color:rgba(0, 0, 0, 0.25);
+  font-size: 12px;
 }

components/IconFont/IconFont.ts

 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/font_1509781_z48eeampujo.js',
+    scriptUrl: '//at.alicdn.com/t/font_1509781_g70awna9ne.js',
 });
 
 export default IconFont;