公司新项目暂定技术使用React.js,先找几个DEMO试试,其中语法与之前的语法有点点的区别,最坑爹的是没有一个完美的IDE,作为脑子懒得人,没有快捷联想,我的天~~~废话不多说直接上。。。
IDE:Sublime Text 3,更新ReactJS插件,勉强使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<p>-----------------按鈕点击--------------------------------</p>
<div id="content"></div>
<p>-----------------数组解析/组件嵌套--------------------------------</p>
<div id="arraycontent"></div>
<p>-----------------获取真实的DOM节点--------------------------------</p>
<div id="getDOM"></div>
<p>-----------------获取jsx--------------------------------</p>
<div id="getJSX"></div>
<p>///----------------------提交表单----------------------------</p>
<div id="submitForm"></div>
<script type="text/babel" src="content.js" ></script>
</body>
</html>
js
//-----------------按鈕点击--------------------------------
var Clickapp=React.createClass({
getInitialState:function () {
// body...
return { clickCount:0,};
},
handleClick:function () {
// body...
this.setState({
clickCount:this.state.clickCount+1,
});
},
render:function () {
// body...
return(<div>
<h2>点击下面按钮</h2>
<button onClick={this.handleClick}>点击我</button>
<p>一共点击了:{this.state.clickCount}</p>
</div>);
}
});
ReactDOM.render(<Clickapp /> ,document.getElementById('content'));
//<p>-----------------数组解析/组件嵌套--------------------------------</p>
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var ArrayText=React.createClass({
rawMarkup: function() {
var md = new Remarkable();
var rawMarkup = md.render(this.props.comment);
return { __html: rawMarkup };
},
handleAuthorOnClick: function() {
alert(e.target.value);
},
render() {
return (
<div>
<h1 onClick={this.handleAuthorOnClick}>{this.props.author}</h1>
<span dangerouslySetInnerHTML={this.rawMarkup()}></span>
</div>
);
}
});
var Arraycontent=React.createClass({
render() {
var ArrayNodes = this.props.data.map(function(comment) {
return (<div><ArrayText author={comment.author} comment={comment.text}/></div>);
}
);
return (<div>{ArrayNodes}</div>);
}
});
ReactDOM.render(<Arraycontent data={data} /> ,document.getElementById('arraycontent'));
///<p>-----------------获取真实的DOM节点--------------------------------</p>
var GetDOM=React.createClass({
getInitialState:function () {
// body...
return {inputText:"未选中",isCheck:false};
},
handleClick:function () {
this.setState({
isCheck:this.state.isCheck?false:true,
inputText:!this.state.isCheck?"已选中":"未选中"
});
},
render(){
return(
<div>
<input type="checkbox" checked={this.state.isCheck}></input>{this.state.inputText}
<input type="button" value="改变选中状态" onClick={this.handleClick}></input>
</div>
);
}
});
ReactDOM.render(<GetDOM /> ,document.getElementById('getDOM'));
///----------------------提交表单----------------------------
var Checkbox=React.createClass({
render(){
return (<div>
<input onChange={this.props.handleCheckboxChange} type="checkbox" value="A">A</input>
<input onChange={this.props.handleCheckboxChange} type="checkbox" value="B">B</input>
<input onChange={this.props.handleCheckboxChange} type="checkbox" value="C">C</input>
</div>)
}
});
var Radio=React.createClass({
render(){
return (<div>
<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="A">A</input>
<input onChange={this.props.handleRadioChange} type="radio" name="radio" defaultChecked value="B">B</input>
<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="C">C</input>
</div>)
}
});
var SubmitForm=React.createClass({
getInitialState:function(){
return {
textValue:"input value",
selectValue:"B",
checkboxValue:[],
textareaValue:"input same ....",
radioValue:"C",
}
},
handleRadioChange:function(e){
this.setState({
radioValue:e.target.value,
});
},
handleCheckboxChange:function(e){
var checkboxArr=this.state.checkboxValue.slice();
var newVal=e.target.value;
var index=checkboxArr.indexOf(newVal);
if(index==-1){
checkboxArr.push(newVal)
}else{
checkboxArr.splice(index,1)
}
this.setState({
checkboxValue:checkboxArr,
});
},
handleSubmit:function(e){
e.preventDefault();
var formData={
textValue:this.refs.inputText.getDOMNode().value,
selectValue:this.refs.inputSelect.getDOMNode().value,
radioValue:this.state.radioValue,
checkboxValue:this.state.checkboxValue
}
console.log('the form result is:')
console.log(formData)
},
render(){
return (
<form onSubmit={this.handleSubmit}>
文本:<input type="text" ref="inputText" defaultValue={this.state.textValue} />
<br/>
<br/>
选项:<select defaultValue={this.state.selectValue} ref="inputSelect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
单选:
<Radio handleRadioChange={this.handleRadioChange}/>
<br/>
多选:
<Checkbox handleCheckboxChange={this.handleCheckboxChange}/>
<br/>
<input type="submit"></input>
</form>
);
}
});
ReactDOM.render(<SubmitForm /> ,document.getElementById('submitForm'));
实现最后一个提交表单的功能时,虽然把值获取出来,但是在给checkBox,radioBox 赋默认值时,不知如何下手,慢慢来~~明日j继续..
///------------------------获取网络数据----------------------------------
var UserGist=React.createClass({
getInitialState:function(){
return{
username: '',
lastGistUrl: ''
};
},
componentDidMount:function(){
$.get(this.props.source,function(result){
var lastGist=result[0];
if(this.isMounted()){
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
});
}
}.bind(this))
},
render:function(){
return(
<div>
{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
//<p>----------获取网络数据2----------</p>
var RepoList=React.createClass({
getInitialState:function(){
return{
loading: true,
error: null,
data: null
}
},
//then()方法是异步执行 就是当.then()前的方法执行完后再执行then()内部的程序 这样就避免了,数据没获取到等的问题
componentDidMount:function() {
this.props.promise.then(
(value) => this.setState({loading: false, data: value}))
},
render:function(){
if (this.state.loading) {
return <span>Loading...</span>;
}else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}else {
console.log(data)
var repos = this.state.data.items;
var repoList = repos.map(function (repo, index) {
return (
<Form> <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li></Form>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
)
}
}
});
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery'
import {ButtonArea,
Button,
Cells,
CellsTitle,
CellsTips,
Cell,
CellHeader,
CellBody,
CellFooter,
Form,
FormCell,
Icon,
Input,
Label,
TextArea,
Switch,
Radio,
Checkbox,
Select,
Uploader} from 'react-weui';
import Page from '../../component/page';
比较乱...