前端学习笔记 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 绑定.

简单例子

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>