美文网首页
React 开发实用小集合(2018.08)

React 开发实用小集合(2018.08)

作者: River_mx | 来源:发表于2018-08-16 13:38 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:React 开发实用小集合(2018.08)

          本文链接:https://www.haomeiwen.com/subject/yavwbftx.html