React的事件处理

Veröffentlicht am

事件处理

  • React元素的事件处理和DOM元素很相似，但是有一点语法上的不同。
  • React事件绑定的命名一般采用驼峰式写法，而不是小写。
  • 如果采用JSX的语法，需要传入一个函数作为事件处理函数，而不是一个字符串，DOM元素的写法。

代码：

1
2
3
<button onClick = {activateLasers}>
	Actirate Lasers
</button>

在React中，另一个不同是你能使用false的方式阻止默认行为，你必须明确使用preventDefault，例如，传统HTML中阻止案件默认打开一个新页面。
代码：

1
2
3
4
5
6
7
8
9
10
11
function ActionLink(){
 function handleClick(e){
  e.preventDefault()
  console.log('the Link was click')
 }
  return (
 <a href="#" onClick={handleClcik}>
 	ClickMe
 </a>
  	)
}

使用React的时候通常不需要使用addEventListener，为一个已创建的DOM元素添加监听器，你仅仅需要在这个元素出事渲染的时候添加一个监听器。

一个Toggle组件渲染一个让用户切换开关状态的按钮。

你必须谨慎对待，JSX回调函数中的this类的方法默认是不会绑定this的，如果你忘记绑定this.handleClick，并把它传入onClick中，当你调用这个函数的时候this值是undefined。

这是函数如何在JS运行的一部分，通常情况下，如果你没在方法后面添加()，例如，onClick={this.handleClick}，你应该为这个方法绑定this。

事件渲染

在React，你可以创建不同的组件来封装各种你你需要的行为，然后根据应用的状态变化只渲染其中的一部分。

React条件渲染也是用JS操作符，或是条件操作符。
先来看两个组件：

1
2
3
4
5
6
function UserGreeting(props){
return <h1>Welcome</h1>
}
function GuestGreeting(props){
	return <h1>Please sign up </h1>
}

我们将创建一个Greeting组件，他会根据用户是否登录显示其中之一。

1
2
3
4
5
6
7
8
function Greeting(props){
	const isLoggedIn = props.isLoggedIn
	if(isLoggedIn){
		return <UserGreeting />
	}else{
		return <GuestGreeting />
	}
}