[React] React Fundamentals: Using Refs to Access Components-mysql教程-PHP中文網

首頁

資料庫

mysql教程

[React] React Fundamentals: Using Refs to Access Components

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 pm 03:39 PM

reactrefsusing

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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

MySQL與Sqlite有何不同？Apr 24, 2025 am 12:12 AM

MySQL和SQLite的主要區別在於設計理念和使用場景：1.MySQL適用於大型應用和企業級解決方案，支持高性能和高並發；2.SQLite適合移動應用和桌面軟件，輕量級且易於嵌入。

MySQL中的索引是什麼？它們如何提高性能？Apr 24, 2025 am 12:09 AM

MySQL中的索引是數據庫表中一列或多列的有序結構，用於加速數據檢索。 1）索引通過減少掃描數據量提升查詢速度。 2）B-Tree索引利用平衡樹結構，適合範圍查詢和排序。 3）創建索引使用CREATEINDEX語句，如CREATEINDEXidx_customer_idONorders(customer_id)。 4）複合索引可優化多列查詢，如CREATEINDEXidx_customer_orderONorders(customer_id,order_date)。 5）使用EXPLAIN分析查詢計劃，避

說明如何使用MySQL中的交易來確保數據一致性。Apr 24, 2025 am 12:09 AM

在MySQL中使用事務可以確保數據一致性。 1)通過STARTTRANSACTION開始事務，執行SQL操作後用COMMIT提交或ROLLBACK回滾。 2)使用SAVEPOINT可以設置保存點，允許部分回滾。 3)性能優化建議包括縮短事務時間、避免大規模查詢和合理使用隔離級別。

在哪些情況下，您可以選擇PostgreSQL而不是MySQL？Apr 24, 2025 am 12:07 AM

選擇PostgreSQL而非MySQL的場景包括：1)需要復雜查詢和高級SQL功能，2)要求嚴格的數據完整性和ACID遵從性，3)需要高級空間功能，4)處理大數據集時需要高性能。 PostgreSQL在這些方面表現出色，適合需要復雜數據處理和高數據完整性的項目。

如何保護MySQL數據庫？Apr 24, 2025 am 12:04 AM

MySQL數據庫的安全可以通過以下措施實現：1.用戶權限管理：通過CREATEUSER和GRANT命令嚴格控制訪問權限。 2.加密傳輸：配置SSL/TLS確保數據傳輸安全。 3.數據庫備份和恢復：使用mysqldump或mysqlpump定期備份數據。 4.高級安全策略：使用防火牆限制訪問，並啟用審計日誌記錄操作。 5.性能優化與最佳實踐：通過索引和查詢優化以及定期維護兼顧安全和性能。

您可以使用哪些工具來監視MySQL性能？Apr 23, 2025 am 12:21 AM

如何有效監控MySQL性能？使用mysqladmin、SHOWGLOBALSTATUS、PerconaMonitoringandManagement(PMM)和MySQLEnterpriseMonitor等工具。 1.使用mysqladmin查看連接數。 2.用SHOWGLOBALSTATUS查看查詢數。 3.PMM提供詳細性能數據和圖形化界面。 4.MySQLEnterpriseMonitor提供豐富的監控功能和報警機制。

MySQL與SQL Server有何不同？Apr 23, 2025 am 12:20 AM

MySQL和SQLServer的区别在于：1)MySQL是开源的，适用于Web和嵌入式系统，2)SQLServer是微软的商业产品，适用于企业级应用。两者在存储引擎、性能优化和应用场景上有显著差异，选择时需考虑项目规模和未来扩展性。

在哪些情況下，您可以選擇SQL Server而不是MySQL？Apr 23, 2025 am 12:20 AM

在需要高可用性、高級安全性和良好集成性的企業級應用場景下，應選擇SQLServer而不是MySQL。 1)SQLServer提供企業級功能，如高可用性和高級安全性。 2)它與微軟生態系統如VisualStudio和PowerBI緊密集成。 3)SQLServer在性能優化方面表現出色，支持內存優化表和列存儲索引。

See all articles