为了账号安全,请及时绑定邮箱和手机立即绑定

最新版本的react代码,亲测可用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/react.js"></script>
		<script type="text/javascript" src="js/react-dom.js"></script>
 		<script src="js/browser.min.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/babel">
			var TestClickComponent = React.createClass({
				handleClick:function(event){
					var tipE = this.refs.tip;
					
					if(tipE.style.display === 'none'){
						tipE.style.display = 'inline';
					}else{
						tipE.style.display = 'none';
					}
					
					event.stopPropagation();
					event.preventDefault();
				},
				render:function(){
					return(
						<div>
							<button onClick={this.handleClick}>显示|隐藏</button><span ref='tip'>测试点击显示隐藏</span>
						</div>
					);
				}
			});
			
			var TestInputComponent = React.createClass({
				getInitialState: function() {
		          return {inputContent: ''};
		        },
				changeHandler:function(event){
			        
					this.setState({
						inputContent: event.target.value
					});
					
					event.preventDefault();
					event.stopPropagation();
				},
				render:function(){
					return (
						<div>
							<input type="text" onChange={this.changeHandler}/><span ref='tip'>{this.state.inputContent}</span>
						</div>
					);
				}
			});
			
			ReactDOM.render(
				<div>
					<TestClickComponent/>
					<br /><br /><br />
					<TestInputComponent/>
				</div>,
				document.getElementById('container')
			);
		</script>
	</body>
</html>


正在回答

举报

0/150
提交
取消
React入门
  • 参与学习       122141    人
  • 解答问题       121    个

颠覆式前端UI开发框架React入门视频教程,赶紧学起来

进入课程

最新版本的react代码,亲测可用

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信