关于javascript:Day-37100-React-事件传参方法

（一）需要

最近在学习 React，学到了 React 事件传参的形式，就记录一下。

（二）介绍

1、bind 的模式传参

bind 模式 参数在前

clickBtn = (params, event) => {console.log('[ event] >', params, event)
    this.setState({sum: params + 1})
  }

<Button onClick={this.clickBtn.bind(this, this.state.sum)} type="primary"> 点击 +1</Button>

2、箭头函数的模式传参

箭头函数 参数在后

clickBtnCount = (event, params) => {console.log('[ clickBtnCount] >', event, params)
    this.setState({count: params + 2})
  }

<Button onClick={(e) => this.clickBtnCount(e, this.state.count)} type="primary"> 点击 +2</Button>

（三）实现 Demo

/*
 * @Author: ArdenZhao
 * @Date: 2022-04-13 15:48:04
 * @LastEditTime: 2022-04-13 16:23:15
 * @FilePath: /react-ts/src/components/react/6-enent-this.js
 * @Description: file information
 */
import React from 'react';
import "antd/dist/antd.css";
import {Button} from 'antd';

class SubComponent extends React.Component {
  // 挂载阶段
  constructor(props) {super(props);
    this.state = {
      name: 'Arden',
      sum: 1,
      count: 0,
    }
  }
  // bind 的模式，第一个参数是参数值，第二个参数是 event
  clickBtn = (params, event) => {console.log('[ event] >', params, event)
    this.setState({sum: params + 1})
  }
  clickBtnCount = (event, params) => {console.log('[ clickBtnCount] >', event, params)
    this.setState({count: params + 2})
  }
  render() {
    return (
      <>
        <h2> 事件传参 </h2>
        <p>1、bind 的模式传参_计数器：{this.state.sum}</p>
        <Button onClick={this.clickBtn.bind(this, this.state.sum)} type="primary"> 点击 +1</Button>
        <br></br>
        <p>2、箭头函数的模式传参_计数器：{this.state.count}</p>
        <Button onClick={(e) => this.clickBtnCount(e, this.state.count)} type="primary"> 点击 +2</Button>
      </>
    )
  }
}

function ReactParams(props) {
  return (
    <div>
      <h1>Learn, {props.name}</h1>
      <form>
        <SubComponent />
      </form>
    </div>
  );
}
export default ReactParams

写在最初的话

学习路上，经常会懈怠。

《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…

如果有须要的搭档，能够加我微信：learningisconnecting
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）