瀏覽代碼

Merge pull request #45 from DouyinFE/fix#44_slider_demo

fix: fix slider input demo fix #44
代强 4 年之前
父節點
當前提交
73638f9417
共有 2 個文件被更改,包括 28 次插入22 次删除
  1. 23 20
      content/input/slider/index-en-US.md
  2. 5 2
      content/input/slider/index.md

+ 23 - 20
content/input/slider/index-en-US.md

@@ -55,27 +55,30 @@ import React from 'react';
 import { Slider, InputNumber } from '@douyinfe/semi-ui';
 
 class InputSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: 10 };
-    this.getSliderValue = this.getSliderValue.bind(this);
-  }
+    constructor(props) {
+        super();
+        this.state = { value: 10 };
+        this.getSliderValue = this.getSliderValue.bind(this);
+    }
 
-  getSliderValue(value) {
-      this.setState({ value: value / 1 });
-  }
+    getSliderValue(value) {
+        if(isNaN(Number(value))){
+            return;
+        }
+        this.setState({ value: value / 1 });
+    }
 
-  render() {
-    const { value } = this.state
-    return (
-      <div>
-          <div style={{ width: 320, marginRight: 15 }}>
-              <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
-          </div>
-          <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} />
-      </div>
-    );
-  }
+    render() {
+        const { value } = this.state
+        return (
+            <div>
+                <div style={{ width: 320, marginRight: 15 }}>
+                    <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
+                </div>
+                <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} min={0} max={100} />
+            </div>
+        );
+    }
 }
 ```
 
@@ -257,4 +260,4 @@ import { Slider } from '@douyinfe/semi-ui';
 | onChange       | Callback function when slider value changes                                                | (value: number \| number[]) => void      | -       |- |
 
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

+ 5 - 2
content/input/slider/index.md

@@ -57,6 +57,9 @@ class InputSlider extends React.Component {
   }
 
   getSliderValue(value) {
+      if(isNaN(Number(value))){
+          return;
+      }
       this.setState({ value: value / 1 }); 
   }
 
@@ -67,7 +70,7 @@ class InputSlider extends React.Component {
           <div style={{ width: 320, marginRight: 15 }}>
               <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
           </div>
-          <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} />
+          <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} min={0} max={100} />
       </div>
     );
   }
@@ -241,4 +244,4 @@ import { Slider } from '@douyinfe/semi-ui';
 | onChange | 当 Slider 的值发生改变时的回调 | (value: number \| number[]) => void | 无 |-|
 
 ## 设计变量
-<DesignToken/>
+<DesignToken/>