首页 > 软件开发 > JavaScript >

如何使用React中的refs绑定render输出的组件上

来源:互联网 2023-03-16 23:59:59 版权归原作者所有,如有侵权,请联系我们

在我们使用React时,有一种非常特殊的属性refs,可以用在绑定到render()的组件中。设置一个输入框,然后添加属性refs,根据这个属性获取输入框的值等属性。下面利用实例说明,操作如下:Je1办公区 - 实用经验教程分享!

如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

工具/原料

  • React
  • HTML5
  • CSS3
  • HBuilderX
  • JavaScript
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,双击打开HBuilderX根据,新建一个静态页面并引入React相关的JavaScript文件,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 1
  • 2

    第二步,在body>/body>标签中,插入一个div标签并设置ID属性,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 3

    第三步,在div标签下方添加一个script标签,定义一个class,并返回对应的标签,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 4

    第四步,调用ReactDOM.render(),并使用InputSearch组件,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 5

    第五步,保存代码并在浏览器预览界面效果,结果出现了报错;返回检查代码,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 6

    第六步,再次检查代码发现,是由于标签没有关闭值,修改之后再次预览,如下图所示:Je1办公区 - 实用经验教程分享!

    如何使用React中的refs绑定render输出的组件上Je1办公区 - 实用经验教程分享!

  • 注意事项

    • 注意React中的refs的使用方法
    • 注意使用render(),返回值必须有关闭标签,否则会报错

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Je1办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号