react

react中class组件事件处理函数中的this指向

在class组件中我们触发事件,比如点击事件后想拿到state,第一反应肯定是点击后用this.state拿数据

但是,很遗憾react中这样是拿不到的,直接报错,打印this竟然是undefined

react官方:
在JSX回调中你必须注意 this 的指向。 在 JavaScript 中,类方法默认没有绑定的。如果你忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this 会是 undefined 。

解决的方法

我这里列举常见的两种解决的方法,一种是用bind方法解决,一种是箭头函数;而bind方法写法有两种方案。

bind—直接在事件赋值的函数处绑定this

用bind方法为事件处理函数绑定this指向

bind—在构造函数处将bind后的返回值再次赋值给事件处理函数

箭头函数

这种写法个人还是比较喜欢的,它是点击后执行一个箭头函数(而箭头函数是不会绑定this的),再在箭头函数里执行事件处理函数并且传递参数也很方便。

27,899条评论

  • bda trip

    Interesting blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweeks would really make my blog
    stand out. Please let me know where you got your theme.
    Cheers

  • satta king

    Excellent items from you, man. I have keep in mind your stuff previous to and you’re simply extremely fantastic.
    I really like what you’ve obtained right here, certainly like what you are saying and the best way during which you
    are saying it. You’re making it enjoyable and you continue to care for to keep it sensible.

    I can’t wait to read much more from you. This is really a wonderful site.

  • Xian Yu Ge

    เรื่องย่อ Xian Yu Ge พี่ปลาเค็ม Salted Fish
    พ่อแล้วก็ลูกชายออกทริปตกปลาบนเรือลำเล็กในห้วงมหาสมุทรมาสองสามวันแล้ว พวกเขาได้จับปลาหลากหลายชนิดและก็จัดเตรียมให้กิน ลูกชายตื่นเต้นที่จะแบ่งปันของกินจานโปรดกับปลาเค็มกับบิดา แต่บิดาพูดว่าเขาไม่ต้องการลองทำเนื่องจากเขาไม่หิว
    ยามเช้าแล้วพึ่งจะจับปลาตัวใหญ่ได้ มันเป็นการจับปลาที่ใหญ่ที่สุดของทริปจนถึงขณะนี้ แต่เมื่อพวกเขาไปเตรียมมัน พวกเขาพบว่ามีเพียงแต่กระดูกอยู่ในนั้น พวกเขาใส่ใจดีว่าในความเป็นจริงแล้วปลาตัวใหญ่เป็นซากเรือที่ถูกทิ้งร้าง ไม่มีเนื้อในนั้นเลย
    ในอนาคตอันไกลโพ้น โลกจะถูกทำลายล้างด้วยมหาการสู้รบ ทรัพยากรทั้งสิ้นหมดลงแล้วก็มนุษยชาติก็อยู่กับที่ ตอนนี้มีผู้หญิงกรุ๊ปหนึ่งอาศัยอยู่ร่วมกันในบ้านหลังเล็กๆพวกเขาไปหลบภัยอยู่ในบ้านไร่ใกล้ๆและก็อาศัยอยู่ด้วยผลไม้จากต้นไม้แล้วก็ผักจากสวนที่อยู่ตรงนั้น

  • BUDIDAYA TANI

    After I initially commented I seem to have clicked
    on the -Notify me when new comments are added- checkbox and now whenever a comment
    is added I get four emails with the same comment.
    Is there a way you are able to remove me from that service?
    Thank you!

Leave a Reply

邮箱地址不会被公开。