得到在浏览器上显示的元素 - refs

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

想在组件上访问到显示在页面上的元素,我们可以通过 refs .. 比如我要在用户提交评论的表单的时候,得到用户在表单里填写的数据 ..

打开 CommentForm.js .. 找到里面的这个 input 元素 .. 这个文本框里的内容是用户的姓名 .. 在上面添加一个 ref .. 它的值设置成 author .. 然后在这个文本区域的上面,也添加一个 ref .. 值设置成 text .. 这样我们就可以使用 this.refs.text 得到这个文本区域 ..

在这个 handleSubmit 方法里面 .. 添加两个变量 . 先添加一个 author .. 它的值就是 this.refs.author ,找到 ref 值是 author 的这个元素,它就是显示在浏览器上的那个文本框元素 .. .. 然后再访问一下它的 value 属性的值,这个属性里面就是在 author 这个文本框里输入的内容 ..

再添加一个变量 .. 名字是 text .. 它的值就是 this.refs.text .. 也就是评论表单上的文本区域 .. 访问一下 value 的值 ..

下面我们可以测试一下,在控制台上输出 author .. 还有 text .. 打开浏览器 .. 还有控制台 .. 在评论表单上输入点东西 .. 点击 添加评论 ..

控制台上会显示一个错误,说找不到 refs 这个属性 .. 这是因为在这个 handleSubmit 里面丢了 this .. 在这个 this.handleSubmit 的后面,可以再绑定一个 this .. 保存 .. 再回到浏览器上 .. 输入点东西 .. 点击 提交 ..

这回会把我在表单上填写的内容输出到控制台上 ..

得到在浏览器上显示的元素 - refs《 React 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点