junz91

第一个React组件-带记录的输入框

• 标签: React

试着写的第一个React组件，仿百度地图的样式，数据用localStorage存储。

先看效果：

虚拟DOM的结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<SearchComponent>
    <div className="search_div">
        <!--左div-->
        <div className="left_div">
            <input type="text" onFocus=bound handleFocus() onBlur=bound handleBlur()/>
            <ul>
                <!--历史记录-->
                <li>记录</li>
                <div>
                    <!--删除按钮-->
                    <button onClick=bound handleDelete() 
                    onMouseDown=bound handleMouseDown() 
                    className="delete_btn">删除历史
                    </button>
                </div>
            </ul>
        </div>
        <!--右div-->
        <div className="right_div">
            <!--新增按钮-->
            <button onClick=bound handleAdd() 
            onMouseDown=bound handleMouseDown()>
            添加记录
            </button>
        </div>
    </div>
</SearchComponent>

组件包括的成员：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
getStorage: function() { //用于获取localStorage
	var ls = [];
	for (var key in localStorage) {
		ls.push(localStorage[key]);
	}
	return ls;
},
flag: false, //控制历史记录的显示与隐藏
getInitialState: function() { //初始化状态
	return {
		storage: this.getStorage()
	};
},
handleFocus: function(event) { //显示历史记录
	if (this.state.storage.length > 0)
		this.refs.ul.style.display = "block";
},
handleBlur: function(e) { //隐藏历史记录
	if (this.flag) { //为了避免频繁切换显示与隐藏
		this.flag = false;
		return;
	}
	this.refs.ul.style.display = "none";
},
handleDelete: function() { //删除所有历史记录
	localStorage.clear();
	this.setState({
		storage: []
	});
	this.refs.ul.style.display = "none";
},
handleAdd: function(e) { //添加一条历史记录
	var ls = this.state.storage;
	var val = this.refs.search.value;
	this.refs.search.value = "";
	this.refs.search.focus();
	if (ls.indexOf(val) > -1) {
		return; //如果有则不重复添加
	}
	if (val) {
		var t = (new Date()).getTime();
		localStorage.setItem(t, val);
		this.setState({
			storage: this.getStorage()
		});
		this.refs.ul.style.display = "block";
	}
},
handleMouseDown: function() { //鼠标按下状态不隐藏历史记录
	this.flag = true;
},
handleSelecte: function(VDOM) { //选中一条记录
	this.refs.search.value = VDOM.currentTarget.innerText;
	this.refs.ul.style.display = "none";
}

总结：

  • React偏重于View，组件内混合了数据模型和控制函数，耦合度高；
  • React的思路是把一个组件看成一个独立完整的小模块，不同组件之间的耦合度低，但是内部由数据、函数和界面元素高度耦合而成的；
  • 个人觉得最好不要把样式写到组件内部，因为样式往往比较多，会让组件内部很混乱，而且内部写CSS样式的格式是不同于标准样式的；
  • 现在还不是很清楚不同组件组件之间如何有效通信，组件怎么暴露自己的API给外部。