fix(color-setter): 优化颜色设置器的值处理逻辑

zboMa · zboMa · commit 53b90ff76bf3 · 2024-10-26T22:55:45.000+08:00
- &#23558; setterValue &#30340;&#31867;&#22411;&#20174; string &#25913;&#20026; string | null&#65292;&#20197;&#25903;&#25345; null &#20540;
- &#22312;&#28210;&#26579;&#26102;&#20351;&#29992; value = setterValue || undefined&#65292;&#30830;&#20445;&#19981;&#25509;&#25910; null &#20316;&#20026;&#20540;
- &#26356;&#26032; Input &#21644; SketchPicker &#32452;&#20214;&#30340; value &#23646;&#24615;&#65292;&#20197;&#36866;&#24212;&#26032;&#30340;&#20540;&#22788;&#29702;&#36923;&#36753;
diff --git a/src/setter/color-setter/index.tsx b/src/setter/color-setter/index.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import { Input, Balloon } from '@alifd/next';
 import { SketchPicker } from 'react-color';
 import './index.less';
+
 interface ColorSetterProps {
   value: string;
   onChange: (val: any) => void;
   defaultValue: string;
 }
 interface ColorSetterState {
   width: number;
-  setterValue: string;
+  setterValue: string | null;
 }
 export default class ColorSetter extends React.Component<ColorSetterProps, ColorSetterState> {
   static displayName = 'ColorSetter';
@@ -66,13 +67,17 @@ export default class ColorSetter extends React.Component<ColorSetterProps, Color
   render() {
     const { width, setterValue } = this.state;
     const { onChange } = this.props;
+
+    // &#19981;&#25509;&#25910;null&#20316;&#20026;&#20540;
+    const value = setterValue || undefined;
+
     const InputTarget = (
       <Input
         size="small"
         className="lowcode-setter-color"
         style={{ width: '100%' }}
-        innerBefore={<div className="color-box" style={{ backgroundColor: setterValue }} />}
-        value={setterValue}
+        innerBefore={<div className="color-box" style={{ backgroundColor: value }} />}
+        value={(setterValue ?? '') as string}
         onChange={onChange}
       />
     );
@@ -86,7 +91,7 @@ export default class ColorSetter extends React.Component<ColorSetterProps, Color
         triggerType="click"
         closable={false}
       >
-        <SketchPicker color={setterValue} onChange={this.handleChange} />
+        <SketchPicker color={value} onChange={this.handleChange} />
       </Balloon>
     );
   }
