react三级选择联级响应

最新推荐文章于 2024-06-24 22:14:39 发布

davechan_528

最新推荐文章于 2024-06-24 22:14:39 发布

阅读量5.8k

点赞数

分类专栏： es react 新技术试水文章标签： es react webpack 新技术试水

本文链接：https://blog.csdn.net/ccj1990528/article/details/51445718

版权

博主利用React技术尝试实现了一个三级选择的联动响应功能，虽然代码复杂，但作为新技术的实践，旨在记录学习过程。文中提供了DOM结构和app.js的主要代码。

摘要由CSDN通过智能技术生成

又时隔多日没来博客里逛逛了，最近心血来潮用自己浅薄的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:"请选