mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 02:18:07 +08:00
14a1e6bd51
* feat: tsconfig enable strict * feat: add no-explicit-any * feat: strict * feat: as THEME * feat: 优化 keys 类型写法 * feat: demo remove any * feat: as number * feat: this any * feat: add eslint * feat: cascader * feat: props any * feat: remove any * feat: remove any * feat: any 提示错误 * feat: remove any * feat: add eslint * feat: 允许 T = any 存在 * feat: color funciton * feat: 恢复 lint * feat: merge master * feat: as ReactElement * feat: type
78 lines
1.6 KiB
TypeScript
78 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import type { InputNumberProps } from 'antd';
|
|
import { Col, InputNumber, Row, Slider, Space } from 'antd';
|
|
|
|
const IntegerStep: React.FC = () => {
|
|
const [inputValue, setInputValue] = useState(1);
|
|
|
|
const onChange: InputNumberProps['onChange'] = (newValue) => {
|
|
setInputValue(newValue as number);
|
|
};
|
|
|
|
return (
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={1}
|
|
max={20}
|
|
onChange={onChange}
|
|
value={typeof inputValue === 'number' ? inputValue : 0}
|
|
/>
|
|
</Col>
|
|
<Col span={4}>
|
|
<InputNumber
|
|
min={1}
|
|
max={20}
|
|
style={{ margin: '0 16px' }}
|
|
value={inputValue}
|
|
onChange={onChange}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
const DecimalStep: React.FC = () => {
|
|
const [inputValue, setInputValue] = useState(0);
|
|
|
|
const onChange: InputNumberProps['onChange'] = (value) => {
|
|
if (isNaN(value as number)) {
|
|
return;
|
|
}
|
|
setInputValue(value as number);
|
|
};
|
|
|
|
return (
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={1}
|
|
onChange={onChange}
|
|
value={typeof inputValue === 'number' ? inputValue : 0}
|
|
step={0.01}
|
|
/>
|
|
</Col>
|
|
<Col span={4}>
|
|
<InputNumber
|
|
min={0}
|
|
max={1}
|
|
style={{ margin: '0 16px' }}
|
|
step={0.01}
|
|
value={inputValue}
|
|
onChange={onChange}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Space style={{ width: '100%' }} direction="vertical">
|
|
<IntegerStep />
|
|
<DecimalStep />
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|