前端学习笔记 React (4) Event, Ref

Event 事件

onXyz 表示在做某件事的时候, 通知另一个函数.

例如: onClick 按钮, onKeyDown 按键, onCopy 复制, onSubmit 提交表单…

PS: 支持的事件很多: https://reactjs.org/docs/events.html

Event 与浏览器事件方法相同, 并且无需担心跨浏览器问题.

  • preventDefault() 通知浏览器不要执行与事件关联的默认动作。
  • stopPropagation() 不再派发事件。

Ref 引用表单内容

在表单的文本框, 下拉框, 单复选框等加入 ref, 即可在事件中使用 this.refs.refName.value 进行获取.

需要注意的是, 事件需要进行 this 绑定.

简单例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
submitForm(event) {
event.preventDefault(); // 阻止默认事件

console.log("submit the form...");

const name = this.refs.name.value;
const pass = this.refs.password.value;

console.log("name %s pass %s", name, pass);
}

<form className="ui reply form" onSubmit={this.submitForm.bind(this)}>
<input type="text" ref="name" />
<input type="password", ref="password" />
<button type="submit" className="ui blue button">Submit</button>
</form>
Donate - Support to make this site better.
捐助 - 支持我让我做得更好.