React 开发实用小集合（2018.08）
2018-08-16 本文已影响0人
River_mx
1、不使用bind
使用bind的写法
this.handleclick.bind（this，要传的参数）
handleclick（传过来的参数，event） {
}
Eslint已经不建议使用，可以使用ES6箭头函数替代
handleclick= (val) => {
}
或者
handleclick(传过来的参数) {
const _key = 传过来的参数
const _this = this
return (event) => {
const obj = {}
obj[_key] = event.target.value
_this.setState(obj)
}
}
onChange={this.handleclick('要传的参数')}
注意：
需要传参数，如果不使用
bind例如：
// 传输点击的是哪个用户
handleUserClick = (userId) => {
console.log("ddd")
this.props.onSetCurrentUser(userId)
}
render(){
return (
<div>
<ul className="user-list">
{this.props.users.map(user=>{
return (
<li className={(this.props.currentUserId===user.id?'current':'')}
key={user.id}
onClick={this.handleUserClick(user.id)}
>
<span>{user.name}</span>
</li>
)
})}
</ul>
<input onChange={this.handleChange} value={this.state.newUser}/>
<button onClick={this.handleClick}>新增</button>
</div>
)
}
onClick={this.handleUserClick(user.id)
就会默认执行，因为是循环就会执行n遍，而使用bind的方法是没问题的，所以应该改为同样的箭头函数绑定：
onClick={() => this.handleUserClick(user.id)}
此时加上
()=>是返回的this.handleUserClick(user.id)函数，而不会在加载的时候执行一遍
2、报错：SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
在Eslint json里配置
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"modules": true
},
"sourceType": "module",
"ecmaVersion": 7
},
3、Error: Couldn't find preset "env" relative to directory
npm i babel-preset-env
其他报错，例如：stage-2
npm i -D babel-preset-stage-2
4、render
如果有普通标签，就像vue的template需要在外边嵌套一层div
render(){
return(
<div>
<h2>用户列表</h2>
<UserList onAddUser={this.handleAddUser}
users={this.state.users}
onSetCurrentUser={this.handleSetCurrentUser}
currentUserId={this.state.currentUserId}
/>
</div>
)
}
5、新项目 npm i出错
不切换源，先试试升级到最新版本
npm install -g npm
如果已经切换了源，执行还原回来
npm config set registry https://registry.npmjs.org
6、阻止冒泡事件
定义一个函数
stopPropagation = (e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
}
使用
<html>
...
<div onClick={(event) => this.stopPropagation(event)}>
</div>
...
</html>
注意：
是否加
this取决于使用的是有状态组件还是无状态组件
7、添加多个点击事件
var Test = React.createClass({
onClick(event){
func1();
func2();
},
render(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
或者
<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>
ES6
<a href="#" onClick={(event) => { func1(); func2();}}>Test Link</a>
