react中使用高阶函数

这篇具有很好参考价值的文章主要介绍了react中使用高阶函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

高阶函数,
如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
1.若A函数,接收的参数是一个函数,那么A就可以称高阶函数
2.若A函数,调用的返回值依然是一个函数,那么A就可以称为高阶函数
常见的高级函数有:Promise,setTimeout(()=>{}),map(()=>{})等等文章来源地址https://www.toymoban.com/news/detail-548566.html

<!DOCTYPE html>
<html>
<body>
    <div id="react"> </div>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
   <div id="react"></div>
    <script type="text/babel">
   //函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式
    class Login extends React.Component {
   //初始化状态
   state={username:'', password:''}
   //自定义赋值事件 ,这块属于高阶函数,
   getData=(data)=>{
      console.log(data) //username,password
    // const {username,password} =data
      return (event)=>{
        //console.log("@") //onChange每改变一次,返回值的函数会被调用一次
          return this.setState({
            [data]:event.target.value
          })
      }
   }
     getSubmit=()=>{
     //原生阻止默认事件
     event.preventDefault()
     const {username,password} =this.state
     alert(`姓名${username},密码${password}`)
     }
      render() {
         return (
           <form onSubmit={this.getSubmit}>
         
  {/*这块this.getData("username")加了(),onChange把getData函数的返回值作为回调,不加(),会把getData函数本身作为回调*/}
            姓名:<input onChange={this.getData("username")} type="text" name="username"/>
                 <h2>{this.state.username}</h2>
            密码:<input  onChange={this.getData("password")}  type="password" name="password"/>
                <h2>{this.state.password}</h2>
                <button>登录</button>
           </form>
         )
      }
    }
   ReactDOM.render(<Login/>,document.getElementById("react"))
    </script>
    <style>
        .spacing {
            margin: 15px;
        }
    </style>

</body>

</html>

到了这里,关于react中使用高阶函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React - 你使用过高阶组件吗

    难度级别:初级及以上                                 提问概率:55%  高阶组件并不能单纯的说它是一个函数,或是一个组件,在React中,函数也可以做为一种组件。而高阶组件就是将一个组件做为入参,被传入一个函数或者组件中,经过一定的加工处理,最

    2024年04月16日
    浏览(44)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(56)
  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(45)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(54)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(51)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(42)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(47)
  • golang使用高阶函数优化业务功能

            两个接口(新增Tag和更新Tag),在业务层均需要添加两个校验,校验Tag信息是否重复和Tag的数据中的编码是否重复。         对应的增加两个校验的函数/方法,在接口实现中依次调用两个函数/方法进行校验。         实现简单;但重复代码多,后期再增加其他

    2024年02月07日
    浏览(45)
  • 在JavaScript中的防抖函数 - 通过在React中构建自动完成功能来解释

    当你将一个新应用推向生产环境时,你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的,可能导致用户再也不会访问你的网站。 在本指南中,我们将了解JavaScript中一个非常重要的技术,即防抖函数。

    2024年02月19日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包