react三級選擇聯級響應
阿新 • • 發佈：2019-01-08
又時隔多日沒來部落格裡逛逛了，最近心血來潮用自己淺薄的react功底整了一個三級選擇的聯級響應，程式碼我自己看著都是很錯綜複雜的，不過作為一個新技術，我自己也還沒有很深的理解，就只能先這樣隨意看看了，大家不要在意，只是做一個記錄用~
首先給出的是DOM結構的程式碼，我這裡把樣式也直接扔進去了。
這個是DOM結構的程式碼，這裡的bundle.js是用webpack打包工具打包以後的生成出來的。<!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>
下面是主題的js程式碼：app.js
這裡引用了三個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"));
"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;"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;