接上一篇React学习笔记
React事件处理
- React元素的事件处理和DOM元素的很相似,但是有一点语法上的不同:
- React事件绑定属性的命名采用驼峰式写法,而不是小写。
- 若采用JSX的语法,需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
<!--传统的HTML-->
<button onclick="activateLasers()">
Activate Lasers
</button>
<!-- React中 -->
<button onClick={activateLasers}>
Activate Lasera
</button>
- 在React中另一个不同是不能使用返回false的方式阻止默认行为。必须明确的使用preventDefault.
<!-- 传统的html中阻止链接默认打开一个新页面 -->
<a href="https://google.com" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
<!-- 在React中,应该这样写 -->
function ActionLink(){
function handleClick(e){
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="https:google.com" onClick={handleClick}>
Click me
</a>
)
}
- 使用React时,通常不需要使用addEventListener为一个已创建的DOM元素添加监听器。仅仅需要在这个元素初始渲染时提供一个监听器。
- 当你使用ES6 class语法定义一个组件时,事件处理器会成为类的一个方法。
//下面的Toggle组件渲染一个让用户切换开关的按钮
class Toggle extend React.Component{
constructor(props){
this.state = {isToggleOn : true};
//下面的绑定是必要的,见下面的解释
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState => ({
istoggleOn : !prevState.isToggleOn
})
);
}
render(){
return (
<button onClick={this.Click}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
- JSX回调函数中的this,类的方法默认是不会绑定this的。若你忘记绑定this.handleClick并把它传入onClick,但你调用这个函数时this的值会是undefined。
- 若使用bind让你很烦躁,使用下面的解决办法:
//1. 使用实验性的属性初始化器语法,使用属性初始化器来正确的绑定回调函数
class LoggingButton extends React.Component{
//handleClick = () => {
console.log('this is :' , this);
}
render(){
return {
<button onclick={this.handleClick}>
Click me
</button>
}
}
}
//这个语法在Create React App中默认开启
//2. 不使用属性初始化器语法,可以在回调函数中使用箭头函数:
class LoggingButton extends React.Component{
handleClick(){
console.log('this is: ', this);
}
render(){
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
//这个语法有个问题,详见https://www.reactjscn.com/docs/handling-events.html
向事件处理程序传递参数
- 一般,我们会为事件处理程序传递额外的参数。
- 实例(若ID是你要删除那行的ID,一下两种方式都可以向事件处理程序传递参数)
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this,id)}>Delete Row</button>
//上述例子中,参数e作为React事件对象将会被作为第二个参数进行传递。
//通过箭头函数的方式,事件对象必须显示的进行传递
- 通过bind方式向监听函数传参,在类组件中定义的监听函数,事件对象e要排在所传参数的后面。
条件渲染
- 在React中,可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
- React中的条件渲染和JS中的一致,使用Javascript操作符if或条件运算符来创建表示当前状态的元素,然后让React根据它们来更新UI。
- 实例:(创建一个Greeting组件,根据用户是否登录来显示其中之一)
function Greeting(props){
const isloggedIn = props.isLoggedIn;
if(isLoggedIn){
return <UserGreenting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
元素变量
- 可以使用变量来存储元素。其可以帮助我们有条件的渲染组件的一部分,而输出的其他部分不会更改。
- 实例:(两个组件分别代表注销和登录)
function LoginButton(props){
retrun (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props){
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
- 下面的例子要创建一个名为LoginControl的有状态的组件(它会根据当前的状态来渲染 或)
- 同时渲染前面例子中的
class LoginControl extends React.Component{
constructor(props){
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick(){
this.setState({isLoggedIn: true});
}
handleLogoutClick(){
this.setState({isLoggedIn: false});
}
render(){
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if(isLoggedIn){
button = <LogoutButton onClick={this.handleLogoutClick} />;
}else{
button = <LoginButton onclick={this.handleLogoutClick} />;
}
return(
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
与运算符 &&
- 通过用花括号包裹代码在JSX中嵌入任何表达式,包括JavaScript的逻辑与&&,它可以方便地条件渲染一个元素。
- 实例:
function Mailbox(props){
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages .
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<mailbox unreadMessages={messages} />,
document.getElementById('root')
);
- 在JS中,true && exapression总是返回expression
- false && expression return false.
- 因此,若条件是true,&&右侧的元素就会被渲染,若是false,react就会忽略并跳过。
三目运算符
- 条件渲染的另一种方法就是使用JS的条件运算符 condition ? true : false
- 三目运算符在JS中会被大量运用,必须对这个运算符非常熟练
//实例
render(){
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
- 在较大的表达式中使用:
render(){
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutBUtton onClick={this.handleLogoutClick}/>
): (
<LoginButton onCLick={this.handleLoginClick} />
)}
</div>
);
}
- 注意:若条件变得过于复杂,就需要提取组件
阻止组件渲染
- 极少数情况下,你可能需要隐藏组件,让render方法返回null即可。
- 实例「根据属性warn的值条件渲染,若warn的值是false,组件不会渲染」
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
此笔记只作学习使用,充分参考了React官网-文档和思否上的相关博客!
建议学习React还是要充分的学习官网上的文档教程!