React曾经忽略的知识点(上)
1.JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;
React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本)攻击。
2.事件处理
在 React 中另一个不同是你不能使用返回 false
的方式阻止默认行为。你必须明确的使用 preventDefault
。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
} return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
在这里,e
是一个合成事件。React 根据 W3C spec 来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。
3.事件处理的this
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
} handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
} render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
} ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
你必须谨慎对待 JSX 回调函数中的 this
,类的方法默认是不会绑定 this
的。如果你忘记绑定 this.handleClick
并把它传入 onClick
, 当你调用这个函数的时候 this
的值会是 undefined
。
通常情况下,如果你没有在方法后面添加 ()
,例如 onClick={this.handleClick}
,你应该为这个方法绑定 this
。
解决方法:
1.bind 绑定
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
2.如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数:----------这个语法在 Create React App 中默认开启。
handleClick = () => {
console.log('this is:', this);
}
3.箭头函数
handleClick() {
console.log('this is:', this);
} render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
4.向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如,若是 id
是你要删除那一行的 id,以下两种方式都可以向事件处理程序传递参数:
1.箭头函数
参数 e
作为 React 事件对象将会被作为第二个参数进行传递。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.bind绑定
通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind
的方式,事件对象以及更多的参数将会被隐式的进行传递。
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
值得注意的是,通过 bind
方式向监听函数传参,在类组件中定义的监听函数,事件对象 e
要排在所传递参数的后面
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
} <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
5.多个输入的解决方法
当你有处理多个受控的input
元素时,你可以通过给每个元素添加一个name
属性,来让处理函数根据 event.target.name
的值来选择做什么。
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
}; this.handleInputChange = this.handleInputChange.bind(this);
} handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name; this.setState({
[name]: value
});
} render() {
return (
<form>
<label>
Is going:
<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
</label>
</form>
);
}
}
React曾经忽略的知识点(上)的更多相关文章
- React曾经忽略的知识点(下)
1.JSX渲染 想让类似 false.true.null 或 undefined 出现在输出中,你必须先把它转换成字符串 : <div> My JavaScript variable is ...
- React及Nextjs相关知识点小结
React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...
- Sqlserver中一直在用又经常被忽略的知识点一
已经有快2个月没有更新博客了,实在是因为最近发生了太多的事情,辞了工作,在湘雅医院待了一个多月,然后又新换了工作...... 在平时的工作中,Sqlserver中许多知识点是经常用到的,但是有时候我们 ...
- 关于React Native项目在android上UI性能调试实践
我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...
- React + js-xlsx构建Excel文件上传预览功能
首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...
- git中 .ignore文件的配置 忽略不想上传的文件
1.配置语法: 以斜杠“/”开头表示目录: 以星号“*”通配多个字符: 以问号“?”通配单个字符 以方括号“[]”包含单个字符的匹配列表: 以叹号“!”表示不忽略(跟踪)匹配到的文件或目录: 此外,g ...
- Github使用.gitignore文件忽略不必要上传的文件 (转)
原文地址: https://blog.csdn.net/gjy211/article/details/51607347 常用编程语言及各种框架平台下的通用 .gitignore 文件 http ...
- git忽略一些提交上传的文件
在项目开发的过程中有两种文件是不需要提交的. 1.一些很重要的配置文件 包括服务器地址 账号密码 数据库密码 公私钥等等 2.一些由于开发和沙箱环境和线上环境的差异 不能使用同一个时候 需要同一个文件 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
随机推荐
- 【7.10校内test】T2不等数列
[题目链接luogu] 此题在luogu上模数是2015,考试题的模数是2012. 然后这道题听说好多人是打表找规律的(就像7.9T2一样)(手动滑稽_gc) 另外手动 sy,每次测试都无意之间bib ...
- dp常见优化方法
noip范围内的dp优化方法: 加速状态转移 1.前缀和优化 2.单调队列优化 3.线段树或树状数组优化 精简状态 3:精简状态往往是通过对题目本身性质的分析,去省掉一些冗余的状态.相对以上三条套路性 ...
- laravel5.5部署
一.环境: centos7 + apache2.6+mysql5.5+PHP7.2 确保php版本大于7.1,看帮助文档说是7就可以,但是我部署的时候提示要大于7.1,并且要装上必须的php扩展 PH ...
- Python_2day
选择 布尔类型.数值和表达式 注意:比较运算符的相等是两个等号,一个等到代表赋值 在Python中可以用整型0来代表False,其他数字来代表True 后面还会讲到 is 在判断语句中的用发 In [ ...
- 关于 Spring AOP (AspectJ) 你该知晓的一切 (转)
出处:关于 Spring AOP (AspectJ) 你该知晓的一切
- 如何用vue封装一个防用户删除的平铺页面的水印组件
需求 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除 效果 如上图 在body节点下插入水印DOM节点,水印节点覆盖在页面 ...
- P1224 [NOI2013]向量内积
传送门 发现这个内积和矩乘有点像,考虑构造一个 $n$ 行 $m$ 列的矩阵 $A$,每一行都是一个题目给定的 $m$ 维向量 设 $B=AA^T$ ,其中 $A^T$ 为 $A$ 的转置矩阵,那么对 ...
- C++11随机数的正确打开方式
C++11随机数的正确打开方式 在C++11之前,现有的随机数函数都存在一个问题:在利用循环多次获取随机数时,如果程序运行过快或者使用了多线程等方法,srand((unsigned)time(null ...
- 正则表达式、原始字符串及re
正则表达式.原始字符串及re re是python中的一个文本解析工具,常用的方法有: 来源:https://www.ibm.com/developerworks/cn/opensource/os-cn ...
- luogu P5328 [ZJOI2019]浙江省选
传送门 每个人都可以看成一条直线\(y=ax+b\),所以我们要求的是每条线在整点处,上方线的数量的最小值(注意多条直线如果交于同一整点互不影响) 如果\(m=1\),其实只要求出半平面交,然后在半平 ...