react-绑定this并传参的三种方式

更新日期: 2020-01-23阅读: 1.8k标签: 参数

绑定this并传参的三种方式

在事件中绑定this并传参:

  <input type="button" value="在事件中绑定this并传参" onClick={this.handleMsg1.bind(this, '', '')} />

    // 在事件中绑定this并传参
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此时this是个null
        this.setState({
            msg: '在事件中绑定this并传参:' + arg1 + arg2
        });
    }

在构造函数中绑定this并传参:

    // 修改构造函数中的代码:
    this.handleMsg2 = this.handleMsg2.bind(this, '', '');

    <input type="button" value="在构造函数中绑定this并传参" onClick={this.handleMsg2} />

    // 在构造函数中绑定this并传参
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在构造函数中绑定this并传参:' + arg1 + arg2
        });
    }

用箭头函数绑定this并传参:

    <input type="button" value="用箭头函数绑定this并传参" onClick={() => { this.handleMsg3('', '') }} />

    // 用箭头函数绑定this并传参
        handleMsg3(arg1, arg2) {
            this.setState({
                msg: '用箭头函数绑定this并传参:' + arg1 + arg2
            });
        }

绑定文本框与state中的值

vue.js中,默认可以通过v-model指令,将表单控件和我们的data上面的属性进行双向数据绑定,数据变化和页面之间的变化是同步的!

react.js中,默认没有提供双向数据绑定这一功能,默认的,只能把state之上的数据同步到界面的控件上,但是不能默认实现把界面上数据的改变,同步到state之上,需要程序员手动调用相关的事件,来进行逆向的数据传输!

绑定文本框和state的值:

    {/*只要将value属性,和state上的状态进行绑定,那么,这个表单元素就变成了受控表单元素,这时候,如果没有调用相关的事件,是无法手动修改表单元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 这是文本框内容改变时候的处理函数
    handleTextChange = () => {
        this.setState({
            msg: this.refs.txt.value
        });
    }

注意setState的一个问题:

// 保存最新的state状态值,在保存的时候,是异步地进行保存的,所以,如果想要获取最新的,刚刚保存的那个状态,需要通过回掉函数的形式去获取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 获取最新的state状态值
    console.log(this.state.msg);
});

this问题和文本框

import React from 'react'

export default class BindThis extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      msg: '这是默认的msg'
    }

    // 绑定 this 并传参的方式2: 在构造函数中绑定并传参
    // 注意,当为一个函数,调用 bind 改变了this指向后,bind 函数调用的结果,有一个返回值,这个值,就是被改变this指向后的函数的引用;
    // 注意: bind 不会修改 原函数的 this 指向
    this.changeMsg2 = this.changeMsg2.bind(this, '', '')
  }

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>

      {/* bind 的作用: 为前面的函数,修改函数内部的 this 指向,让 函数内部的this,指向 bind 参数列表中的 第一个参数 */}
      {/* bind 和 call/apply 之间的区别: */}
      {/*  call/apply 修改完this指向后,会立即调用前面的函数,但是 bind 只是修改this指向,并不会调用 */}
      {/* 注意: bind 中的第一个参数,是用来修改 this 指向的,第一个参数后面的所有参数,都会当作将来调用 前面函数 时候的参数传递进去 */}
      {/* 方式1:在 事件处理函数中,直接使用 bind 绑定 this 并传参 */}
      <input type="button" value="绑定this并传参的方式1" onClick={this.changeMsg1.bind(this, '', '')} />
      <input type="button" value="绑定this并传参的方式2" onClick={this.changeMsg2} />
      {/* <input type="button" value="绑定this并传参的方式3" onClick={() => { this.changeMsg3('', '') }} /> */}
      <input type="button" value="绑定this并传参的方式3" onClick={() => { this.changeMsg3('', '') }} />

      <hr />

      <h3>{this.state.msg}</h3>

      {/* 在 Vue 中,有 v-model 指令来实现双向数据绑定,但是,在 React 中, 根本没有指令的概念,因此React 默认也不支持 双向数据绑定 */}
      {/* React 只支持,把数据从 state 上传输到 页面,但是,无法自动实现数据从 页面 传输到 state 中 进行保存,也就是,React 不支持数据的自动逆向传输, 只是实现了数据的单向绑定 */}
      {/* 注意:如果为 表单元素,提供了 value 属性绑定,那么,必须同时为 表单元素 绑定 readOnly, 或者提供要给 onChange 事件 */}
      {/* 如果提供了readOnly,表示这个元素只读的不能被修改  */}
      {/* 如果提供了onChange 表示,这个元素的值可以被修改,但是,要自己定义修改的逻辑  */}
      <input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={this.txtChanged} ref="txt" />
    </div>
  }

  // 为 文本框 绑定 txtChanged 事件
  txtChanged = (e) => {
    // console.log('ok');
    // 如果想让 文本框在触发 onChange 的时候,同时把文本框最新的值,保存到 state 中,那么,我们需要手动调用 this.setState

    // 获取文本框中 最新文本的3种方式:
    //  1. 使用 document.getElementById 来拿
    //  2. 使用 ref 来拿
    // console.log(this.refs.txt.value);
    //  3. 使用 事件对象的 参数 e 来拿   e.target 就表示触发 这个事件的 事件源对象,得到的是一个原生的JS dom 对象
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    })
  }

  changeMsg1(arg1, arg2) {
    // 注意:这里的方式,是一个普通方法,因此,在触发的时候,这里的 this 是 undefined
    // console.log(this);
    this.setState({
      msg: '绑定this并传参的方式1' + arg1 + arg2
    })
  }

  changeMsg2(arg1, arg2) {
    // console.log(this);
    // 注意:这里的方式,是一个普通方法,因此,在触发的时候,这里的 this 是 undefined
    this.setState({
      msg: '绑定this并传参的方式2' + arg1 + arg2
    })
  }

  changeMsg3 = (arg1, arg2) => {
    // console.log(this);
    // 注意:这里的方式,是一个普通方法,因此,在触发的时候,这里的 this 是 undefined
    this.setState({
      msg: '绑定this并传参的方式3' + arg1 + arg2
    })
  }
}

链接: https://fly63.com/article/detial/7362

用js获取url地址协议,参数,端口号,锚点等方法总汇

在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

URLSearchParams_js中快速构造和获取URL查询参数的方法

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。

js通过arguments来获取指定参数

通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步

如何给外部引用的js文件传递参数

给外部引用的js文件传递参数的4种方式:定义全局变量、在src后面传参、检索js文件(js文件要最后引入)、设置其他属性

jquery ajax error函数和及其参数详细说明

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。

vue-router动态路由设置参数可选

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面

掌握JS函数中的几种参数形式

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

你需要了解的前后端传参

前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参

Less参数混合

* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!