react三级选择联级响应

又时隔多日没来博客里逛逛了，最近心血来潮用自己浅薄的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,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,townListStatus:true
                                });
                                townList=["请选择"];
                                return;
                            }
                        }
                    }else{
                        for(var k=1;k<locationList[proIndex].length;k++){
                            cityList.push(locationList[proIndex][k][0])
                        }
                        this.setState({
                            cityList:cityList,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;

这是第一次写react相关的技术，可能我跟新技术比较慢半拍，现在才开始写一个稍微全面一点的技术，由于对react了解有限，导致整个代码冗余还是比较严重的，交互也没有想象的那样友好，反正是一个相对来说比较失败的例子，但是对我来说初学这些，能写一个这样的demo让自己更好的整合知识，我已经很开心了。原文链接：https://www.f2er.com/react/306754.html

react三级选择联级响应

猜你在找的React相关文章