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

Z时代
2024-01-10
分类：综合

react

绑定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的一个问题：

资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com

// 保存最新的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
    })
  }}

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
    })
  }}