案例基本覆盖了React中各类基础语法，以及父子间数值传递、事件传递的代码实例，可供参考。
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title></title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ToDoInput = React.createClass({
handleClick: function () {
//调用ToDoBox中的addToLists的方法
this.props.funcAdd(this.refs.myInput.value);
//将输入框中内容清空
this.refs.myInput.value = "";
},
render: function () {
return <div>
<h1>待办事项列表</h1>
<input ref="myInput" type="text" placeholder="请输入" />
<button onClick={this.handleClick}>
add
</button>
</div>
}
})
var ToDoList = React.createClass({
render: function () {
return <ul>
{
this.props.myList.map(
(value, index) => {
console.log(index, value);
return <ToDoItem
myDelete={this.props.funcDelete}
myValue={value}
myIndex={index}
key={index} />
})
}
</ul>
}
})
var ToDoItem = React.createClass({
handleDelete: function () {
//确认当前自己是第几个元素
console.log(this.props.myIndex);
//调用todobox传递给todolist，又传递给todoitem的删除的方法
this.props.myDelete(this.props.myIndex);
},
render: function () {
return <li>
<button
onClick={this.handleDelete} >delete</button>
<span>{this.props.myValue}</span>
</li>
}
})
var ToDoBox = React.createClass({
getInitialState: function () {
return { list: [] }
},
//定义一个方法，用来向状态对应的数组 插入内容
addToList: function (msg) {
var nowList = this.state.list;
nowList.push(msg);
this.setState(
{ list: nowList },
function () {
console.log(this.state.list);
}
);
},
//定义一个方法，用来从状态的数组中删除指定位置的元素
deleteFromList: function (index) {
var nowList = this.state.list;
nowList.splice(index, 1);
this.setState(
{ list: nowList },
function () {
console.log(this.state.list);
}
);
},
render: function () {
return <div>
<ToDoInput funcAdd={this.addToList} />
<ToDoList
funcDelete={this.deleteFromList}
myList={this.state.list} />
</div>
}
})
ReactDOM.render(
<ToDoBox />,
document.getElementById('example')
)
|
