float 和 input 组件

最新推荐文章于 2023-02-18 20:56:00 发布

weixin_44626449

最新推荐文章于 2023-02-18 20:56:00 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_44626449/article/details/87997948

版权

<!DOCTYPE html>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
::-webkit-scrollbar {/*隐藏滚轮*/
display: none;
}
html,body,#app{
	height:100%;
	font-size:60px;
}	
li , span{
	list-style-type:none;
	cursor:pointer;
}
.input{
	display:flex;
	justify-content:space-between;
}

.input input{
	outline:none;
	border:none;
	height:70px;
	font-size:60px;
	flex:1;
}	
.input li{
	#CFCFCF;
}	
.float{
	display:flex;
	width:200%;
	height:100%;
	align-items:center;
	position:relative;
}	
.floatLeft{
	width:50%;
}		
.floatRight{
	display:flex;
	justify-content:center;
	width:50%;
}	
</style>
<div id='app'>
</div>
<script src=jq.js></script>
<script type="text/babel">
class Input extends React.Component{
	state={}
	componentDidMount(){
		let _this=this
		setInterval(function(){
			if($('.input input').val()){
				_this.setState({color:'#1f82fc'})
				
			}	
			else _this.setState({color:'#CFCFCF'})
		})
	}
	click=(e)=>{
		if($(e.target).css('color') == 'rgb(31, 130, 252)') this.props.click(e,$('.input input').val())
	}	
	render() {
		return (
			<div className='input' >
				<input placeholder={this.props.placeholder} />
				<li onClick={this.click} style={{color:this.state.color}}>{this.props.button}</li>
			</div>
		)
    }
}
class Float extends React.Component{
	componentDidMount(){
		$('.float').animate(this.props.animate)
	}	
	render() {
		return (
			<div className='float' style={this.props.float}>
				<div className='floatLeft' style={this.props.floatLeft} onClick={this.props.left.click}>
					{this.props.left.data}
				</div>
				<div className='floatRight' style={this.props.floatRight} onClick={this.props.right.click}>
					{this.props.right.data}
				</div>
			</div>
		)
    }
}	
class App extends React.Component{
	register=val=>console.log(val)
	floatBack=()=>$('.float').animate({left:'1px'}).animate({right:'1px'})
	render() {
		return (
			<Float float={{alignItems:'flex-end'}} //alignItems默认中间，这里可设置，其余同理。
				animate={{right:'100%'}}
				left={{data:<Input click={this.register} placeholder='请输入用户名' button='注册' />}} right={{data:'注册',click:this.floatBack}}
			/>

		)
    }
}	
ReactDOM.render(
  <App /> 
  ,document.getElementById('app')
)
</script>

weixin_44626449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float 和 input 组件

&lt;!DOCTYPE html&gt;&lt;meta charset="UTF-8" /&gt;&lt;script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"&gt;&lt;/script&gt;&lt;script src="https://cdn.staticfile.or
复制链接

扫一扫