又时隔多日没来博客里逛逛了，最近心血来潮用自己浅薄的react功底整了一个三级选择的联级响应，代码我自己看着都是很错综复杂的，不过作为一个新技术，我自己也还没有很深的理解，就只能先这样随意看看了，大家不要在意，只是做一个记录用~
首先给出的是DOM结构的代码，我这里把样式也直接扔进去了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{padding: 0; margin: 0;}
.pr{ position: relative; float: left; margin-right: 6px; width: 110px; height: 36px; border: 1px #666 solid;}
.provide,.city,.town{ cursor: pointer;}
.provide p,.city p,.town p{ padding-right:10px; text-align: center; line-height: 36px;}
.provide i,.city i,.town i{ position: absolute; right: 4px; top: 15px; width: 0; height: 0; border-top: 6px #666 solid; border-left: 6px #fff solid; border-right: 6px #fff solid;}
.locationList{ position: absolute; top: 100%; left: -1px; width: 110px; border: 1px #666 solid; border-top: none;}
.locationList p{ text-align: center; line-height: 36px;}
.locationList p:hover{ background-color: #aaaaaa;}
</style>
</head>
<body>
<div id="test"></div>
<script src="bundle.js"></script>
</body>
</html>
这个是DOM结构的代码，这里的bundle.js是用webpack打包工具打包以后的生成出来的。
下面是主题的js代码：app.js
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var ProvideList = require("./provideList");
var CityList = require("./cityList");
var TownList = require("./townList");
const Test = React.createClass({
getInitialState:function(){
return {
provideStatus:true,
cityStatus:false,
townStatus:false,
provideListStatus:true,
cityListStatus:false,
townListStatus:false,
provide:"请选择",
city:"请选择",
town:"请选择",
provideList:[],
cityList:[],
townList:[]
}
},
render:function(){
return <div>
<div>
<div className="pr" style={{display:this.state.provideStatus==true?"block":"none"}}>
<div className="provide" onClick={function(){this.handleClick("provide")}.bind(this)}>
<i></i>
<p>{this.state.provide}</p>
</div>
<ProvideList
info={this.state.provideList}
listStatus={this.state.provideListStatus}
onChange={function(val){this.handleProvideCallback(val)}.bind(this)} />
</div>
<div className="pr" style={{display:this.state.cityStatus==true?"block":"none"}}>
<div className="city" onClick={function(){this.handleClick("city")}.bind(this)}>
<i></i>
<p>{this.state.city}</p>
</div>
<CityList
info={this.state.cityList}
listStatus={this.state.cityListStatus}
onChange={function(val){this.handleCityCallback(val)}.bind(this)} />
</div>
<div className="pr" style={{display:this.state.townStatus==true?"block":"none"}}>
<div className="town" onClick={function(){this.handleClick("town")}.bind(this)}>
<i></i>
<p>{this.state.town}</p>
</div>
<TownList
info={this.state.townList}
listStatus={this.state.townListStatus}
onChange={function(val){this.handleTownCallback(val)}.bind(this)} />
</div>
</div>
</div>;
},
handleTownCallback:function(val){
this.setState({town:val.title,townStatus:true,townListStatus:val.listStatus})
},
handleCityCallback:function(val){
this.setState({city:val.title,townStatus:val.status,cityListStatus:val.listStatus},function(){this.setState({town:"请选择"})}.bind(this))
},
handleProvideCallback:function(val){
this.setState({provide:val.title,cityStatus:val.status,provideListStatus:val.listStatus},function(){this.setState({city:"请选择",town:"请选择"})}.bind(this))
},
handleClick:function(type){
var option={};
if(type=="provide"){
this.getLocation(option);
}else if(type=="city"){
option.provide=this.state.provide;
this.getLocation(option);
}else if(type=="town"){
option.provide=this.state.provide;
option.city=this.state.city;
this.getLocation(option);
}
},
getLocation:function(param){
var locationList=[
["北京市",["北京市","东城区","西城区","崇文区"]],
["广东省",["深圳市","南山区","福田区","龙岗区","龙华区"],["广州市","天河区","海珠区","荔湾区"]],
["湖北省",["武汉市","汉口","武汉","武昌"],["潜江市","熊口","老新"]],
["江苏省",["南京市","江宁区","溧水区","高淳区","六合区"],["苏州市","吴江区","姑苏区","吴中区","虎丘区"]],
["四川省",["成都市","温江区","新都区","青羊区","金牛区"],["绵阳市","涪城区","游仙区"]]
];
if(typeof param.provide=="undefined"){
this.setState({
provideListStatus:true,
cityListStatus:false,
townListStatus:false,
provideList:["请选择","北京市","广东省","湖北省","江苏省","四川省"]
})
}else{
var proIndex,cityIndex,cityList=["请选择"],townList=["请选择"];
for(var i=0;i<locationList.length;i++){
if(param.provide==locationList[i][0]){
proIndex=i;
if(typeof param.city!="undefined"){
console.log(proIndex,locationList[proIndex])
for(var k=1;k<locationList[proIndex].length;k++){
if(param.city==locationList[proIndex][k][0]){
cityIndex=k;
for(var j=1;j<locationList[proIndex][k].length;j++){
townList.push(locationList[proIndex][k][j]);
}
this.setState({
townList:townList,
provideListStatus:false,
cityListStatus:false,
townListStatus:true
});
townList=["请选择"];
return;
}
}
}else{
for(var k=1;k<locationList[proIndex].length;k++){
cityList.push(locationList[proIndex][k][0])
}
this.setState({
cityList:cityList,
provideListStatus:false,
cityListStatus:true,
townListStatus:false
});
cityList=["请选择"];
}
return;
}
}
}
}
});
console.log(document.getElementById("test"));
ReactDOM.render(<Test />,document.getElementById("test"));
这里引用了三个js，分别是省的展示、市的展示、区的展示。
"use strict";
var React = require("react");
var Provide = require("./test");
const ProvideList = React.createClass({
render:function(){
console.log(this.props.listStatus);
return <Provide info={this.props.info} listStatus={this.props.listStatus} onChange={function(val){this.props.onChange(val)}.bind(this)} />
}
});
module.exports = ProvideList;
"use strict";
var React = require("react");
var City = require("./test");
const CityList = React.createClass({
render:function(){
return <City info={this.props.info} listStatus={this.props.listStatus} onChange={function(val){this.props.onChange(val)}.bind(this)} />
}
});
module.exports = CityList;
"use strict";
var React = require("react");
var Town = require("./test");
const TownList = React.createClass({
render:function(){
console.log(this.props.info);
return <Town info={this.props.info} listStatus={this.props.listStatus} onChange={function(val){this.props.onChange(val)}.bind(this)} />
}
});
module.exports = TownList;
这三个js引用了同一个js文件，test.js，test.js里面才是对实际内容的渲染。
"use strict";
var React = require('react');
const InfoList = React.createClass({
render:function(){
return <div className="locationList" style={{display:this.props.listStatus==true?"block":"none"}}>
{this.props.info.map(function(result){
return <p onClick={this.handleClick}>{result}</p>
}.bind(this))}
</div>
},
handleClick:function(e){
this.props.onChange({title:e.target.innerText,status:true,listStatus:false});
}
});
module.exports = InfoList;