可以根据鼠标事件对DOM进行添加和删除吗?看了一下文档,往一个div里面添加比较常见,没什么问题,主要是想实现移除,没看到示例。
补充:
具体我是要做一个二级菜单,类似下图,鼠标点击比如“北京”,就会弹出北京下面的区县.
原实现是:一级菜单是写好的html,二级菜单不是写好的隐藏html,而是一堆js数组,用原生js循环的方式取出,组成一个div插入到一个父div中,绑定鼠标事件,点击的时候弹出,换到其他一级菜单元素的时候,弹出相应的二级弹出菜单,并且前面“北京”一级元素的二级菜单消失。
我想用react来做,猜想更加简洁,不知道鼠标事件这里怎么弄?
reactjs
最好不要 在onScroll中做setState的处理,你会哭的。
reactjs对于新增的界面是不是都用路由开启一个新的view 比如在线编辑器要添加一个上传图片的功能,这个弹出的上传文件的div应该怎么写?
你既然都使用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;
大概这样,大神轻喷
监听onScroll事件 在Handler里面更新state(通过this.setState()) 触发React Rerender,将DOM操作交给React. 让React高效的Diff算法决定对真实DOM最小的操作。