學習React不是一蹴而就的事情,入門似乎也沒那麼簡單。但我覺得這一切都是值得的。
這是我在學習React中的一些心得,希望能夠幫助到大家!
React可以使用兩種樣式,一種是普通的css,一種是在React中定義的樣式。
普通的css樣式,通過className=""來引用
<!--普通css樣式-->
<style>
.style_2{
background-color: #6699ff;
font-size: 24px;
padding: 3px 5px 3px 5px;
color: #FFFFFF;
}
.Separate{
height: 10px;
}
</style>
<span className="style_2">賬號:</span>
React中定義的樣式,通過style={}來引用
//React的css樣式
var style_1={
color:'#9900ff',
padding:3,
}
組件
構建組件(名字隨意起,首字母要大寫),我這裏構建了一個叫Board的組件,然後通過getInitialState進行初始化。通過ReactDOM.render加載到html頁面中。如果ReactDOM.render中有多個組件或者標籤,則需要用一個div標籤來包裹。
var Board = React.createClass({
//初始數據
getInitialState: function(){
return ({
comments: [{account:"123456",name:"落葉丶Fly"},{account:"111111",name:"啦啦啦"}]
});
},
//初始化
eachComment: function(text,i){
return (
<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
<br className="Separate"></br>
<span className="style_2">賬號:</span>
<span className="style_2">{text.account}</span>
<br></br>
<span className="style_2">用戶名:</span>
<span className="style_2">{text.name}</span>
</Comment>
);
},
ReactDOM.render(
//需要用一個div標籤來包裹
<div>
<h1 style={style_1}>落葉丶Fly的React小站</h1>
<Board />
</div>,
document.getElementById('container')
);
props和state
state:React 把組件看成是一個狀態機(State Machines)。通過與用戶的交互,實現不同狀態,然後渲染 UI,讓用戶界面和數據保持一致。React 裏,只需更新組件的 state,然後根據新的 state 重新渲染用戶界面(不要操作 DOM)。
props:state 和 props 主要的區別在於 props 是不可變的,而 state 可以根據與用戶交互來改變。這就是爲什麼有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。
函數
React中的button點擊事件和普通的JavaScript差不多,但是要注意onClick中的C要大寫,否則會報錯。本文通過按鈕點擊來更改editing的布爾值,用setState函數進行更新,從而在普通模式與編輯模式中切換。
<button onClick={this.edit}>編輯</button>
//編輯
edit: function(){
this.setState({editing: true});
},
//保存
save: function(){
var val = this.refs.new_account.value;
var val1 = this.refs.new_name.value;
console.log("拿到的值是: " + val+val1);
this.props.updateCommentText(val,val1,this.props.index)
this.setState({editing: false});
},
//普通模式
renderNormal:function(){
return (
<div>
<div>{this.props.children}</div>
<button onClick={this.edit}>編輯</button>
<button onClick={this.remove}>移除</button>
</div>
);
},
//編輯模式
renderForm:function(){
let children = this.props.children
return (
<div>
<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
<div></div>
<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
<div></div>
<button onClick={this.save}>保存</button>
</div>
)
},
//模式更改
render: function (){
//console.log(this.props)
if(this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
}
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React-Template</title>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>
<script type="text/javascript" src="js/babel.min.js" ></script>
</head>
<!--普通css樣式-->
<style>
.style_2{
background-color: #6699ff;
font-size: 24px;
padding: 3px 5px 3px 5px;
color: #FFFFFF;
}
.Separate{
height: 10px;
}
</style>
<body>
<!-- 容器 -->
<div id="container"></div>
<script type="text/babel">
//React的css樣式
var style_1={
color:'#9900ff',
padding:3,
}
var Board = React.createClass({
//初始數據
getInitialState: function(){
return ({
comments: [{account:"123456",name:"落葉丶Fly"},{account:"111111",name:"啦啦啦"}]
});
},
//修改並更新數據
updateComment: function(new_account,new_name,i){
console.log(new_account+":"+new_name);
var arr = this.state.comments;
arr[i].account = new_account;
arr[i].name = new_name;
this.setState({comments: arr});
},
//刪除數據
removeComment: function(i){
var arr = this.state.comments;
arr.splice(i,1);
this.setState({comments: arr});
},
//初始化
eachComment: function(text,i){
return (
<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
<br className="Separate"></br>
<span className="style_2">賬號:</span>
<span className="style_2">{text.account}</span>
<br></br>
<span className="style_2">用戶名:</span>
<span className="style_2">{text.name}</span>
</Comment>
);
},
//新增用戶
add: function(text){
var arr = this.state.comments;
arr.push(text);
console.log('arr', this.state.comments)
this.setState({comments: arr});
},
render: function(){
return (
<div>
<button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用戶</button>
<div>
{
this.state.comments.map(this.eachComment)
}
</div>
</div>
);
}
});
//編輯保存移除狀態
var Comment = React.createClass({
getInitialState: function(){
return ({editing: false});
},
//編輯
edit: function(){
this.setState({editing: true});
},
//移除
remove: function(){
// alert("removing comment!");
this.props.deleteFromBoard(this.props.index);
},
//保存
save: function(){
var val = this.refs.new_account.value;
var val1 = this.refs.new_name.value;
console.log("拿到的值是: " + val+val1);
this.props.updateCommentText(val,val1,this.props.index)
this.setState({editing: false});
},
//普通模式
renderNormal:function(){
return (
<div>
<div>{this.props.children}</div>
<button onClick={this.edit}>編輯</button>
<button onClick={this.remove}>移除</button>
</div>
);
},
//編輯模式
renderForm:function(){
let children = this.props.children
return (
<div>
<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
<div></div>
<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
<div></div>
<button onClick={this.save}>保存</button>
</div>
)
},
//模式更改
render: function (){
//console.log(this.props)
if(this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
}
});
ReactDOM.render(
//需要用一個div標籤來包裹
<div>
<h1 style={style_1}>落葉丶Fly的React小站</h1>
<Board />
</div>,
document.getElementById('container')
);
</script>
</body>
</htm>