react操作UI交互的问题

疯云林渡
  • 271

刚刚接触react,还不够明白它的理念和思想。有几个问题想咨询如何做出来。

import * as React from 'react'
import { Map, Marker } from 'react-amap'
import helper from 'immutability-helper'
import ConstVal from 'apollo-common/src/constants'
import EstateDetail from './estateCharts/index'
import classNames from 'classnames'
import './index.scss'

export default class EstateMap extends React.PureComponent<any, any> {

    constructor() {
        super()
        this.state = {
            list: {
                store: [],
                estate: [],
            }
        }
    }

    componentDidMount() {
        let data = this
        fetch('http://192.168.16.239:8080/mockjsdata/44/map/estate/list')
            .then(function (response) {
                return response.json()
            }).then(function (json) {
                data.setState({list:json.list})
            },
        )
    }

    render() {
        //地图参数
        const params = {
            zooms: [11, 20],
            zoom: 10,
            plugins: ['MapType', 'OverView', 'Scale', {
                name: 'ToolBar',
                options: {
                    autoPosition: true,
                },
            }],
            expandZoomRange: true,
            MarkerType: '',
            center: { longitude: 121.474017, latitude: 31.222311 },
            Events: {
                zoomchange: function (target) {
                    console.log(this.getZoom())
                    this.getZoom()
                },
            }
        };

        const MarkerEvents = {
            click: function (e, c) {
                e.target.setTop(true)
                let option = {
                    type: e.target.getExtData().split('?')[0],
                    data: JSON.parse(e.target.getExtData().split('?')[1]),
                }
                console.log(option.data)
                if (option.type === 'estate') {

                }
            },
            mouseover: (e) => {
                e.target.setTop(true)
                let option = {
                    type: e.target.getExtData().split('?')[0],
                    data: JSON.parse(e.target.getExtData().split('?')[1]),
                }
                console.log(option)
                if (option.type === 'store') {
                    console.log(classNames)
                }
            },
            mouseout: (e) => {
                e.target.setTop(false)
                let option = {
                    type: e.target.getExtData().split('?')[0],
                    data: JSON.parse(e.target.getExtData().split('?')[1]),
                }

                if (option.type === 'store') {
                    e.target.setContent(
                        `<div class='Store_Marker' title=${option.data.name}>
                                    <span class='icon_span'></span>
                                </div>`,
                    )
                }
            }
        }

        return (
            <div className="EstateMap">
                <div className="Map-left">
                    <div className="Map-header">
                        <div className="header-left">11</div>
                        <div className="header-right">222</div>
                    </div>
                    <Map
                        amapkey={ConstVal.MAP_KEY}
                        mapStyle={ConstVal.MAP_STYLEURL}
                        zooms={params.zooms}
                        plugins={params.plugins}
                        center={params.center}
                        events={params.Events}
                        expandZoomRange={params.expandZoomRange}
                    >
                        {
                            Object.keys(this.state.list).map((e) => {
                                return this.state.list[e].map((item, index) => {
                                    return (
                                        <Marker position={item.position} extData={e + '?' + JSON.stringify(item)} key={index} events={MarkerEvents}>
                                            {(() => {
                                                switch (e) {
                                                    case 'store': return <Store data={item} />
                                                    case 'estate': return <Estate data={item} />
                                                    case 'floor': return '#0000FF'
                                                    case 'floors': return '#0000FF'
                                                    default: return '#0000FF'
                                                }
                                            })()}
                                        </Marker>
                                    )
                                })
                            })

                        }
                    </Map>
                </div>
                <div className="Map-right">
                    <EstateDetail />
                </div>
            </div>
        )
    }
}

export class Store extends React.PureComponent<any, any> {
    render() {
        let isShow:boolean = false;
        let classStyle = classNames('icon_name',{
            'Show':isShow
        })
        return (
            <div className="Store_Marker" title={this.props.name}>
                <span className="icon_span" />
                <span className={classStyle}>{this.props.name}</span>
            </div>
        )
    }
}

export class Estate extends React.PureComponent<any, any> {
    render() {
        const { isMain } = this.props
        const classes = classNames('Estate_Marker', {
            'small': isMain
        })
        return (
            <div className={classes} />
        )
    }
}

目前我的问题如下:

click: function (e, c) {
    e.target.setTop(true)
    let option = {
        type: e.target.getExtData().split('?')[0],
        data: JSON.parse(e.target.getExtData().split('?')[1]),
    }
    console.log(option.data)
    if (option.type === 'estate') {
        //在这里如何将当前marke内的dom添加个class,其他market内的dom去掉class呢?
    }
},

在这里如何将当前marke内的dom添加个class,其他market内的dom去掉class呢?

评论
阅读 1k
4 个回答
首先你可以对于你的数组进行定义,举例说明一下:
this.state = {
    list:[{
        uid:1,
        isactive:false
    },{
        uid:2,
        isactive:false
    },{
        uid:3,
        isactive:false
    }]
}

uid是唯一的标识,isactive判断是否显示某个class

点击的操作执行之后,更改this.state.list对应的uid的isactive值,this.setState一下list

这样组件就会重新渲染,即可实现这样的效果

jQuery的思维方式是如何操作dom达到效果。
react的思维方式是如何操作state达到效果。所以用react的时候,应该尽可能的忘记dom。
楼主代码中用字符串拼接html是属于react的反模式,极不推荐。

可以通过state生成一个需要的className
JSX本质上是JS,所以支持JS的所有特性, 比如className可以是一个function的返回值。里面可以自由处理逻辑。

<div className={func(arg)}></div>

请问下 怎么用 图片 作为 Marker

比如添加的class为color,
$('.color').removeClass('color')
$(this).addClass('color')

宣传栏