reactjs可以根据鼠标事件对DOM进行添加和删除吗？

Question

可以根据鼠标事件对DOM进行添加和删除吗？看了一下文档，往一个div里面添加比较常见，没什么问题，主要是想实现移除，没看到示例。

补充：
具体我是要做一个二级菜单，类似下图，鼠标点击比如“北京”,就会弹出北京下面的区县.
原实现是：一级菜单是写好的html，二级菜单不是写好的隐藏html，而是一堆js数组，用原生js循环的方式取出，组成一个div插入到一个父div中，绑定鼠标事件，点击的时候弹出，换到其他一级菜单元素的时候，弹出相应的二级弹出菜单，并且前面“北京”一级元素的二级菜单消失。
我想用react来做，猜想更加简洁，不知道鼠标事件这里怎么弄？

reactjs

Answer 1

监听onScroll事件 在Handler里面更新state（通过this.setState()） 触发React Rerender，将DOM操作交给React. 让React高效的Diff算法决定对真实DOM最小的操作。

Answer 2

最好不要 在onScroll中做setState的处理，你会哭的。

Answer 3

你既然都使用react了，就不要总用jq的思想去处理问题，比如这种针对dom的添加删除操作。
react使用state表示组件状态，所以要解决你的需求，只需要定义一个state属性，保存需要渲染的二级菜单div，之后只需要监听相应的事件，针对这个state属性进行setState，就能动态的渲染，达到添加删除的效果。

---

抽空给你写个demo，上班中

---

import React from 'react';
import ReactDOM from 'react-dom';

const List = {
    1: ['foo', 'bar', 'baz'],
    2: ['foo1', 'bar1', 'baz1'],
    3: ['foo2', 'bar2', 'baz2']
};//省事儿，自行用ajax什么的替换

//为了省事儿就不用鼠标事件了，找个select凑乎一下
let SelectionDemo = React.createClass({
    getInitialState(){
        return {
            show: 1
        };
    },

    handleChange(e){
        let elem=e.target;

        this.setState({show:elem.value})
    },

    render() {
        let children = List[this.state.show].map((e, i)=> {
            return <span key={i}>{e}</span>
        });

        return (
            <div>
            //这是你的写好的一级菜单，北京市什么的
                <select onChange={this.handleChange}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>
            //这是你待显示的二级信息，市区什么的
                {children}
            </div>
        );
    }
});

module.exports=SelectionDemo;

大概这样，大神轻喷

Answer 4

reactjs对于新增的界面是不是都用路由开启一个新的view 比如在线编辑器要添加一个上传图片的功能,这个弹出的上传文件的div应该怎么写?