2016-11-24 14:03:57 +08:00
---
order: 7
title:
2019-05-07 14:57:32 +08:00
zh-CN: 输入时格式化展示
en-US: Format Tooltip Input
2016-11-24 14:03:57 +08:00
---
## zh-CN
结合 [Tooltip ](/components/tooltip ) 组件,实现一个数值输入框,方便内容超长时的全量展现。
## en-US
You can use the Input in conjunction with [Tooltip ](/components/tooltip ) component to create a Numeric Input, which can provide a good experience for extra-long content display.
2019-05-07 14:57:32 +08:00
```jsx
2016-11-24 14:03:57 +08:00
import { Input, Tooltip } from 'antd';
function formatNumber(value) {
value += '';
const list = value.split('.');
const prefix = list[0].charAt(0) === '-' ? '-' : '';
let num = prefix ? list[0].slice(1) : list[0];
let result = '';
while (num.length > 3) {
result = `,${num.slice(-3)}${result}` ;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return `${prefix}${result}${list[1] ? ` .${list[1]}` : ''}`;
}
class NumericInput extends React.Component {
2019-05-07 14:57:32 +08:00
onChange = e => {
2016-11-24 14:03:57 +08:00
const { value } = e.target;
2020-01-07 11:42:31 +08:00
const reg = /^-?[0-9]*(\.[0-9]*)?$/;
2019-08-05 18:38:10 +08:00
if ((!isNaN(value) & & reg.test(value)) || value === '' || value === '-') {
2016-11-24 14:03:57 +08:00
this.props.onChange(value);
}
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
2016-11-24 14:03:57 +08:00
// '.' at the end or only '-' in the input box.
onBlur = () => {
2017-02-19 15:06:37 +08:00
const { value, onBlur, onChange } = this.props;
2020-01-07 11:42:31 +08:00
let valueTemp = value;
2016-11-24 14:03:57 +08:00
if (value.charAt(value.length - 1) === '.' || value === '-') {
2020-01-07 11:42:31 +08:00
valueTemp = value.slice(0, -1);
2016-11-24 14:03:57 +08:00
}
2020-01-07 11:42:31 +08:00
onChange(valueTemp.replace(/0*(\d+)/, '$1'));
2017-02-19 15:06:37 +08:00
if (onBlur) {
onBlur();
2016-11-24 14:03:57 +08:00
}
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
2016-11-24 14:03:57 +08:00
render() {
const { value } = this.props;
2017-02-19 15:06:37 +08:00
const title = value ? (
2019-05-07 14:57:32 +08:00
< span className = "numeric-input-title" > {value !== '-' ? formatNumber(value) : '-'}< / span >
) : (
'Input a number'
);
2016-11-24 14:03:57 +08:00
return (
2017-02-19 15:06:37 +08:00
< Tooltip
trigger={['focus']}
title={title}
placement="topLeft"
overlayClassName="numeric-input"
>
< Input
{...this.props}
onChange={this.onChange}
onBlur={this.onBlur}
2017-02-19 15:21:46 +08:00
placeholder="Input a number"
2018-12-27 11:46:22 +08:00
maxLength={25}
2017-02-19 15:06:37 +08:00
/>
< / Tooltip >
2016-11-24 14:03:57 +08:00
);
}
}
class NumericInputDemo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
2018-06-27 15:55:04 +08:00
2019-05-07 14:57:32 +08:00
onChange = value => {
2016-11-24 14:03:57 +08:00
this.setState({ value });
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
2016-11-24 14:03:57 +08:00
render() {
2019-05-07 14:57:32 +08:00
return (
< NumericInput style = {{ width: 120 } } value = {this.state.value} onChange = {this.onChange} / >
);
2016-11-24 14:03:57 +08:00
}
}
ReactDOM.render(< NumericInputDemo / > , mountNode);
2019-05-07 14:57:32 +08:00
```
2016-11-24 14:03:57 +08:00
2019-05-07 14:57:32 +08:00
```css
2017-01-05 15:35:43 +08:00
/* to prevent the arrow overflow the popup container,
2016-11-24 14:03:57 +08:00
or the height is not enough when content is empty */
.numeric-input .ant-tooltip-inner {
min-width: 32px;
min-height: 37px;
}
.numeric-input .numeric-input-title {
font-size: 14px;
}
2019-05-07 14:57:32 +08:00
```