<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.bodystyle{
width: 100%;
height: 100%;
background: brown;
}
.borderstyle{
border: 1px solid #ccc;
background: #ffffff;
width: 200px;
margin: 10px;
float: left;
height: 80px;
}
textarea{
width: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/babel">
//父级DIV
var Demo = React.createClass({
//初始化
getInitialState:function(){
return ({
datas:[]
});
},
updateComment:function(newText,i){
var arr = this.state.datas;
arr[i] = newText;
this.setState({datas:arr});
},
delComment:function(i){
var arr = this.state.datas;
arr.splice(i,1);
this.setState({datas:arr});
},
eachComment:function(text,i){
return (
<Crud delCommentText={this.delComment} updateCommentText={this.updateComment} key={i} index={i}>
{text}
</Crud>
)
},
add:function(text){
var arr = this.state.datas;
arr.push(text);
this.setState({datas:arr});
},
render:function(){
return(
<div>
<div>
<button onClick={this.add.bind(null,"Hello world")}>添加</button>
</div>
<div className="bodystyle">
{this.state.datas.map(this.eachComment)}
</div>
</div>
);
}
});
//子级DIV
var Crud = React.createClass({
getInitialState:function(){
return ({
edit:false
});
},
edit:function(){
this.setState({edit:true})
},
del:function(){
this.props.delCommentText(this.props.index)
},
save:function(){
var val = this.refs.newText.value;
this.props.updateCommentText(val,this.props.index)
this.setState({edit:false})
},
rederNormal:function(){
return (
<div className="borderstyle">
<div>{this.props.children}</div>
<button onClick={this.edit}>编辑</button>
<button onClick={this.del}>删除</button>
</div>
);
},
rederForm:function(){
return (
<div className="borderstyle">
<textarea ref="newText" defaultValue={this.props.children}></textarea>
<button onClick={this.save}>更新</button>
</div>
);
},
render:function(){
if(this.state.edit){
return this.rederForm()
}else{
return this.rederNormal()
}
}
});
ReactDOM.render(
<Demo />,
document.getElementById('container')
);
</script>
</html>
