React 前端开发 (2) - 列表,事件

列表 & Key

1
2
3
4
5
6
7
8
9
render() {
return (
<ul>
{this.state.todoList.map((item, id) => {
return <Todo name={item} key={id} />;
})}
</ul>
);
}

event 监听

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
// input 事件: 将 input 值存储到 state 中
handleInputChange(e) {
const target = e.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;

this.setState({
[name]: value,
});
}

<input type="text" name="todo" id="todo" value={this.state.todo} onChange={(e) => this.handleInputChange(e)}></input>

// 按钮事件: 定义一个函数, 监听按钮点击操作
deleteItem(id) {
console.log("delete id: ", id, "list: ", this.state.todoList);
this.state?.todoList.splice(id, 1);

this.setState({ todoList: this.state.todoList });
}

<button onClick={() => this.deleteItem(id)}>x</button>

// submit 事件
handleSubmit(e) {
// 阻止触发默认表单事件
e.preventDefault(e);

// 对表单事件的处理: 这里是将数据加入到 state 中, 也可以请求 api 等
if (this.state.todo !== "") {
const newTodoList = this.state.todoList.concat(this.state.todo);
this.setState({ todoList: newTodoList, todo: "" });
}
}
<form onSubmit={(e) => this.handleSubmit(e)}></form>

总结

  1. ul, li 中 li 必须有 key 字段, 一般可指定数据库 id 等内容
  2. 表单一般将表单数据在交互时都存储于 state 中: e.target.{name, type, value}
  3. 在事件中拿到数据, 需要 onClick = (e) => this.handler(e, 其他数据)
  4. 阻止表单默认内容提交: e.preventDefault(e)
Donate - Support to make this site better.
捐助 - 支持我让我做得更好.