藍鷗React Native零基礎入門到項目實戰 Hello React
http://edu.csdn.NET/course/detail/3129
state
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- react.js是React的核心庫 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供與DOM相關的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是將JSX語法轉換成JavaScript語法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作爲一個容器 -->
<div id="container">
</div>
</body>
<!-- 在React開發中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
// 在此處編寫React代碼
/*
事件處理
react中的事件名稱，首字母小寫，駝峯命名法
案例： 定義一個組件，組件中包含一個button，給button綁定onClick事件
*/
// var MyButton = React.createClass({
// handleClick: function() {
// alert("點擊按鈕觸發的效果");
// },
// render: function() {
// return (
// <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
// );
// }
// });
//
// ReactDOM.render(
// <MyButton buttonTitle="按鈕" />,
// document.getElementById("container")
// );
//
//
/*
state 狀態
props
組件自身的屬性
this.state
*/
// 需求：創建一個CheckButton的組件，包含一個checkbox類型<input>
// 複選框在選中和未選中兩種狀態下會顯示不同的文字。即根據狀態渲染
var CheckButton = React.createClass({
// 定義初識狀態
getInitialState: function() {
return {
// 在這個對象中設置的屬性，將會存儲在state中
// 默認狀態，未選中
isCheck: false
}
},
// 定義事件綁定的方法
handleChange: function() {
// 修改狀態值，通過this.state讀取設置的狀態值
this.setState({
isCheck: !this.state.isCheck
});
},
render: function() {
// 根據狀態值，設置顯示的文字
// 在JSX語法中，不能直接使用if，使用三目運算符
var text = this.state.isCheck ? "已選中" : "未選中";
return (
<div>
<input type="checkbox" onChange={this.handleChange} />
{text}
</div>
);
}
});
ReactDOM.render(
<CheckButton />,
document.getElementById("container")
);
// 當state發生變化時，會調用組件內部的render方法
/*
需求：定義一個組件，將用戶在輸入框內輸入的內容進行實時顯示
分析：
組件與用戶交互過程中，存在狀態的變化，即輸入框的值
*/
var Input = React.createClass({
getInitialState: function() {
return {
value: "請輸入"
};
},
handleChange: function(event) {
// 通過event.target.value讀取用戶輸入的值
this.setState({
value: event.target.value
});
},
render: function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(
<Input />,
document.getElementById("container")
);
</script>
</html>