1. 首页
  2. IT资讯

「React TS3 专题」使用 TS 的方式在类组件里定义事件

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fa7e99a5d419e43bdba419de995dfd667″ img_width=”1280″ img_height=”720″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6730099916216992270u002F?group_id=6730099916216992270″ target=”_blank”u003E「React TS3 专题」亲自动手创建一个类组件u003Cu002Fau003E,我们一起学习了如何用 TS 的方式在React 里定义类组件(class component)以及了解了什么是 JSX。本篇文章,笔者将带着大家一起了解下如何使用 TS 的方式在 React 里定义u003Cstrongu003E类组件事件u003Cu002Fstrongu003E。u003Cu002Fpu003Eu003Ch1u003E在 JSX 里简单的定义事件u003Cu002Fh1u003Eu003Cpu003E最简单的方式就是在JSX里添加事件,上一小节,我们熟悉了如何在 JSX 添加属性,因此很自然的想到,我们可以在 JSX 里添加事件:u003Cu002Fpu003Eu003Cpu003E1、第一步在上一小节例子的基础上,我们添加按钮的点击事件,在确认按钮上添加点击事件属性,代码如下:u003Cu002Fpu003Eu003Cpreu003E<button className=”confirm-ok” onClick={this.handleOkClick}>…<u002Fbutton>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E我们点击按钮时就触发调用 handleOkClick 方法。u003Cu002Fpu003Eu003Cpu003E2、接下来我们创建 handleOkClick 方法:u003Cu002Fpu003Eu003Cpreu003Eprivate handleOkClick() {u003Cbru003E console.log(“Ok clicked”);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E3、接下来我们运行下我们的项目u003Cu002Fpu003Eu003Cpu003E通过启动命令运行项目,我们来点击确认按钮,就会看到如下图所示的提示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fb2d7ab0fa647462e8cadc43bea77128d” img_width=”1917″ img_height=”101″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E关于this的问题u003Cu002Fh1u003Eu003Cpu003E上述的事件方法里还存在一个隐藏的风险,比如我们调用this属性时,我们来看看会发生什么。u003Cu002Fpu003Eu003Cpu003E1、首先我们来修改点击事件的方法:u003Cu002Fpu003Eu003Cpreu003Eprivate handleOkClick() {u003Cbru003E console.log(“Ok clicked”, this.props);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E然后我们运行下程序,尝试下去点击确认按钮,不出意外的话,你将会看到如下图的报错提示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3509aeba195c4be3a54566a7fd3f6654″ img_width=”1642″ img_height=”844″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E造成这样的问题是this不能指向我们当前组件的类,提示相关属性是未定义的,常用的解决方案,就是把这种函数改成箭头函数,利用箭头函数this的穿透性,就解决了,关于箭头函数的使用问题,笔者的这篇文章u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003E有详细的介绍,不明白的可以去点击查看。u003Cu002Fpu003Eu003Cpu003E2、接下来我们将函数修改成箭头函数u003Cu002Fpu003Eu003Cpreu003Eprivate handleOkClick = () => {u003Cbru003E console.log(“Ok clicked”, this.props);u003Cbru003E};u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E我们运行下项目,你就会在页面控制台,看到如下的输出,很好,如你所愿没有报错:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F467f81019e25422ea45a2fc4184a3ffc” img_width=”3116″ img_height=”550″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E3、接下来,我们在取消按钮里添加取消事件:u003Cu002Fpu003Eu003Cpreu003E<button className=”confirm-cancel” onClick={this.handleCancelClick}>…<u002Fbutton>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E4、最后我们来定义取消按钮事件的方法u003Cu002Fpu003Eu003Cpreu003Eprivate handleCancelClick = () => {u003Cbru003E console.log(“Cancel clicked”, this.props);u003Cbru003E};u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E总而言之,为了避免this引发的风险问题,我们可以使用箭头函数进行有效避免此类问题,接下来我们继续聊聊如何更好的在事件定义里组织逻辑,通过属性的方式进行传递,更方便组件的重用性。u003Cu002Fpu003Eu003Ch1u003E在接口里定义事件属性u003Cu002Fh1u003Eu003Cpu003E上一篇文章,我们通过接口的方式定义了属性,接下来我们使用定义接口的方式实现事件的定义,示例代码如下:u003Cu002Fpu003Eu003Cpu003E1、首先接着上篇文章的示例,我们在接口添加如下两个待实现的方法,示例如下:u003Cu002Fpu003Eu003Cpreu003Einterface IProps {u003Cbru003E title: string;u003Cbru003E content: string;u003Cbru003E cancelCaption?: string;u003Cbru003E okCaption?: string;u003Cbru003E onOkClick: () => void;u003Cbru003E onCancelClick: () => void;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E我们定义的事件属性是必填的,因此你会在App.tsx文件里,会提示这两个属性没有定义,稍后我们会解决此问题。u003Cu002Fpu003Eu003Cpu003E2、接下来我们在 Confirm.tsx 文件里实现接口相关方法的定义,示例代码如下:u003Cu002Fpu003Eu003Cpreu003Eprivate handleCancelClick = () => {u003Cbru003Ethis.props.onCancelClick();u003Cbru003E};u003Cbru003Eprivate handleOkClick = () => {u003Cbru003Ethis.props.onOkClick();u003Cbru003E};u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E3、接下来我们在 App.tsx 定义相关方法,修改出现的错误问题,示例代码如下:u003Cu002Fpu003Eu003Cpreu003E const handleCancelConfirmClick = () => {u003Cbru003E console.log(“Cancel clicked”);u003Cbru003E };u003Cbru003E const handleOkConfirmClick = () => {u003Cbru003E console.log(“Ok clicked”);u003Cbru003E };u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E4、最后我们在Confirm组件里添加上事件属性u003Cu002Fpu003Eu003Cpreu003E<Confirmu003Cbru003E …u003Cbru003E onCancelClick={this.handleCancelConfirmClick}u003Cbru003E onOkClick={this.handleOkConfirmClick}u003Cbru003Eu002F>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E修改完后,我们启动项目,然后点击组件的确认和取消按钮,你将会看到以下内容:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F365bf7c7d34748bda861f1aa5d2b7f8a” img_width=”1375″ img_height=”444″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小节u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F175eeb86-7bf2-4acc-875e-b1450cd13289″ img_width=”1200″ img_height=”800″ alt=”「React TS3 专题」使用 TS 的方式在类组件里定义事件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天的文章我们就到这里,内容不是太多,我们一起学习了如何在React里使用TS的方法定义事件,以及使用箭头函数的方式进行事件方法的实现,接下来的文章,笔者将继续介绍,在React里如何用 TS 的方式定义 State。u003Cu002Fpu003Eu003Ch1u003E本系列文章,待续u003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6727984489349251595u002F?group_id=6727984489349251595″ target=”_blank”u003E「React TS3 专题」手把手教你创建一个 React TypeScript3项目u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6730099916216992270u002F?group_id=6730099916216992270″ target=”_blank”u003E「React TS3 专题」亲自动手创建一个类组件u003Cu002Fau003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「React TS3 专题」使用 TS 的方式在类组件里定义事件

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10712.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code