[React] React Fundamentals: Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref . ! DOCTYPE html html head lang ="en" meta charset ="UTF-8" title React Lesson 5: Using Refs to
When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref
.
<span><span>DOCTYPE html</span><span>></span> <span><span>html</span><span>></span> <span><span>head </span><span>lang</span><span>="en"</span><span>></span> <span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>></span> <span><span>title</span><span>></span>React Lesson 5: Using Refs to Access Components<span></span><span>title</span><span>></span> <span></span><span>head</span><span>></span> <span><span>body</span><span>></span> <span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"</span><span>></span><span>script</span><span>></span> <span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"</span><span>></span><span>script</span><span>></span> <span><span>script </span><span>type</span><span>="text/jsx"</span><span>></span> <span>var</span><span> React_app </span><span>=</span><span> React.createClass({ getInitialState: </span><span>function</span><span>() { </span><span>return</span><span> { red: </span><span>128</span><span>, green: </span><span>128</span><span>, blue: </span><span>128</span><span> } }, myUpdate: </span><span>function</span><span>(){ </span><span>this</span><span>.setState({ red: </span><span>this</span><span>.refs.red.getDOMNode().value, green: </span><span>this</span><span>.refs.green.getDOMNode().value, blue: </span><span>this</span><span>.refs.blue.getDOMNode().value }); }, render: </span><span>function</span><span>() { </span><span>return</span><span> ( </span><span><span>div</span><span>></span> <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>red</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.red}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span> <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>green</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.green}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span> <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>blue</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.blue}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span> <span><span>/</span><span>div></span> <span> ); } }); </span><span>var</span><span> Silder </span><span>=</span><span> React.createClass({ render: </span><span>function</span><span>(){ </span><span>return</span><span> ( </span><span><span>input type</span><span>=</span><span>"</span><span>range</span><span>"</span><span> min</span><span>=</span><span>"</span><span>0</span><span>"</span><span> max</span><span>=</span><span>"</span><span>255</span><span>"</span><span> onChange</span><span>=</span><span>{</span><span>this</span><span>.props.update}</span><span>/</span><span>></span> <span> ) } }); React.render(</span><span><span>React_app </span><span>/</span><span>>, document.body);</span> <span></span><span>script</span><span>></span> <span></span><span>body</span><span>></span> <span></span><span>html</span><span>></span></span></span></span></span></label></span></span></span></span></label></span></span></span></span></label></span></span></span></span></span></span></span></span></span></span></span></span></span>
Here we use getDOMNode() to get the html node:
<span><span>Silder </span><span>update</span><span>={this.myUpdate} </span><span>ref</span><span>="red"</span><span>></span><span>Silder</span><span>></span></span>
then get value from it:
this.refs.red.getDOMNode().value
But, if we add a div:
<span> var Silder = React.createClass({ render: function(){ return ( </span><span><span>div</span><span>></span> <span><!--</span><span> added </span><span>--></span> <span><span>input </span><span>type</span><span>="range"</span><span> min</span><span>="0"</span><span> max</span><span>="255"</span><span> onChange</span><span>={this.props.update}</span><span>/></span> <span></span><span>div</span><span>></span> <span><!--</span><span> added </span><span>--></span><span> ) } });</span></span></span>
We found it doesn't work.
The way can solve this problem is by adding another ref to the input element:
<span> var Silder = React.createClass({ render: function(){ return ( </span><span><span>div </span><span>></span> <span><span>input </span><span>type</span><span>="range"</span><span> min</span><span>="0"</span><span> max</span><span>="255"</span><span> ref</span><span>="range"</span><span> onChange</span><span>={this.props.update}</span><span>/></span> <span></span><span>div</span><span>></span><span> ) } });</span></span></span>
myUpdate: <span>function</span><span>(){ </span><span>this</span><span>.setState({ red: </span><span>this</span><span>.refs.red.refs.range.getDOMNode().value, green: </span><span>this</span><span>.refs.green.refs.range.getDOMNode().value, blue: </span><span>this</span><span>.refs.blue.refs.range.getDOMNode().value }); },</span>

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

React前後端分離指南:如何實現前後端的解耦和獨立部署,需要具體程式碼範例在當今的Web開發環境中,前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開,可以讓開發工作更加靈活、高效,並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離,從而實現解耦和獨立部署的目標。首先,我們要先理解什麼是前後端分離。傳統的Web開發模式中,前端和後端是耦合在

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言:現代化的應用程式需要支援可靠的訊息傳遞,以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫,用於建立使用者介面,而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用,並提供具體的程式碼範例。 RabbitMQ概述:

ReactRouter使用指南:如何實現前端路由控制隨著單頁應用的流行,前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫,提供了豐富的功能和易用的API,使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法,並提供一些具體的程式碼範例。安裝ReactRouter首先,我們需要

PHP、Vue和React:如何選擇最適合的前端框架?隨著互聯網技術的不斷發展,前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架,每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時,開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使

Java框架與React框架的整合:步驟:設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例(SpringBoot+React):Java程式碼:定義RESTfulAPI控制器。 React程式碼:取得並顯示API回傳的資料。

如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展,越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一,提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統,並給出具體的程式碼範例。建立React專案首先

微軟於近日針對Canary頻道的WindowsInsider專案成員,發布了Win11Build25324預覽版更新。這次更新除了增加對SHA-3的支援外,微軟還悄悄將ReFS檔案系統版本從3.9升級到3.10版本。與NTFS(NewTechnologyFileSystem,新技術檔案系統,於1993隨NT系統一同亮相)相比,ReFS宣稱可在虛擬機器(vm)上帶來更強的彈性、更高的效能,以及更高的資料大小支持(35PB,NTFS為256TB),以及其他優點。微軟在Win11Build25309預覽版

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。
