import React from 'react';
import PropTypes from 'prop-types'; class AutoWidthInput extends React.Component { static propTypes = {
value: PropTypes.string,
placeholder: PropTypes.string,
minWidth: PropTypes.number,
onChange: PropTypes.func
} static defaultProps = {
minWidth: 28,
onChange: () => { }
} constructor(props) {
super(props);
this.state = {
inputWidth: props.minWidth
};
} componentDidMount() {
this.updateInputWidth();
} componentDidUpdate() {
this.updateInputWidth();
} updateInputWidth = () => {
let width = Math.max(this.sizer.scrollWidth, this.placeholderSizer.scrollWidth) + 2;
width = Math.max(width, this.props.minWidth);
const { inputWidth } = this.state;
if (inputWidth !== width) {
this.setState({ inputWidth: width });
}
}
handleChange = (e) => {
this.setState({ value: e.target.value });
this.props.onChange(e);
}
render() {
const { inputWidth } = this.state;
const { value, placeholder } = this.props;
return (
<div style={{ display: 'inline-block' }}>
<input
style={{ width: inputWidth }}
type="text"
value={value}
onChange={this.handleChange}
placeholder={placeholder}
/>
<div ref={(div) => { this.sizer = div; }} style={{ position: 'absolute', top: 0, left: 0, visibility: 'hidden', height: 0, overflow: 'scroll', whiteSpace: 'pre' }}>
{value}
</div>
<div ref={(div) => { this.placeholderSizer = div; }} style={{ position: 'absolute', top: 0, left: 0, visibility: 'hidden', height: 0, overflow: 'scroll', whiteSpace: 'pre' }}>
{placeholder}
</div>
</div>
);
}
} export default AutoWidthInput;

  

AutoWidthInput的更多相关文章

随机推荐

  1. windows cmd 新建和删除文件

    1.新建文件夹 # 新建App文件夹 md app # 或者使用 mkdir mkdir app 2.新建文件 # 进入App文件夹cd app # 新建 index.js 文件 type nul&g ...

  2. unity_pojie

    http://www.ceeger.com/forum/read.php?tid=23396&desc=1

  3. php 数值转多少年,多少天,多少时,多少分,多少秒

    function Sec2Time($time){ if(is_numeric($time)){ $value = array( "years" => 0, "da ...

  4. 部署开发以太坊dapp的四种方式

    我们已经学习了4种开发和部署智能合约的方法: 第1种是使用 Truffle 和 Ganache .由于我们从上一篇教程中复制了代码,所以我想告诉你,有些插件可用于目前最流行的文本编辑器和 IDEs.有 ...

  5. [Xcode 实际操作]六、媒体与动画-(1)使用图形上下文按一定比例缩放图片

    目录:[Swift]Xcode实际操作 本文将演示如何通过图形上下文,来实现图片缩放的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKi ...

  6. 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (二)

    本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...

  7. Java基础笔记(五)——数据类型转换

    数据类型的精度由低到高为:byte < short < char < int < long < float < double 低精度的类型与高精度的类型在进行运算时 ...

  8. Sql Server常用函数及技巧

    使用Sql Server好长时间了,今天特别想总结一下,算是回顾吧! 总结: 其实很多技巧,都是基于SQL Server自带的System Views,System Stored Procedures ...

  9. [題解](水/數學)luogu_P1147連續自然數和

    尺取法a掉 然而數學解法為 等差數列求和公式: sum(L,R)=(L+R)(R-L+1)/2=M 即(L+R)(R-L+1)=2M 可以把2M分解成两个数之积,假设分成了两个数K1,K2,且K1&l ...

  10. 微信小程序实战

    为了积攒粉丝,公司决定做一个一分钱姓名测算的小程序引导大家关注公众号. 实现的需求就是  1 首页 用户编辑姓名和性别进行提交 2 测算结果页 实现分享和支付功能 3 测算历史页面 看到用户曾经测算记 ...