国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React中受控與非受控組件

wenhai.he / 1808人閱讀

摘要：首次發表在個人博客受控組件或都要綁定一個事件每當表單的狀態發生變化都會被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態與它的或者向對應通過這種方式消除了組件的局部狀態是的應用的整個狀態可控官方同樣推薦使用受控表單組件總結

首次發表在個人博客
受控組件 
 {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

或 this.name = i} defaultValue="BeiJing" /> ); } } export default UnControlled; 對比受控組件和非受控組件

將輸入的字母轉化為大寫展示

 {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

直接展示輸入的字母

 {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>
1.性能上的問題

在受控組件中,每次表單的值發生變化,都會調用一次onChange事件處理器,這確實會帶來性能上的的損耗,雖然使用費受控組件不會出現這些問題,但仍然不提倡使用非受控組件,這個問題可以通過Flux/Redux應用架構等方式來達到統一組件狀態的目的.

2.是否需要事件綁定

使用受控組件需要為每一個組件綁定一個change事件,并且定義一個事件處理器來同步表單值和組件的狀態,這是一個必要條件.當然,某些情況可以使用一個事件處理器來處理多個表單域

import React, { Component } from "react";

class Controlled extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            name: "xingxing",
            age: 18,
        };
    }
    handleChange = (name, e) => {
        const { value } = e.target;
        this.setState({
            [name]: value,
        });
    }
    render() {
        const { name, age } = this.state;
        return (
            

                
                
            

        );
    }
}

export default Controlled;
表單組件的幾個重要屬性 1.狀態屬性

React的form組件提供了幾個重要的屬性,用來顯示組件的狀態

value: 類型為text的input組件,textarea組件以及select組件都借助value prop來展示應用的狀態

checked: 類型為radio或checkbox的組件借助值為boolean類型的selected prop來展示應用的狀態

selected: 該屬性可作用于select組件下面的option上,React并不建議這種方式表示狀態.而推薦在select組件上使用value的方式

2.事件屬性

當狀態屬性改變時會觸發onChange事件屬性.受控組件中的change事件與HTML DOM中提供的input事件更為類似;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92081.html

相關文章

  • [ 一起學React系列 -- 5 ] 如何優雅得使用表單控件

    摘要：假如我們從后臺拉取一個數據要填入輸入框，那么必須得使用受控組件，因為非受控組件只能被用戶輸入。不影響正常輸入填充該輸入框的默認值，此時不顯示內容。 網頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現形式沒有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負大家...

    Charlie_Jade 評論0 收藏0

  • React深度編程：受控組件與非受控組件

    摘要：受控組件與非受控組件在官網與國內網上的資料都不多，有些人覺得它可有可不有，也不在意。受控組件與非受控組件是處理表單的入口。認為不能單獨存在，需要與等控制的屬性或事件一起使用。它們共同構成受控組件，受控是受的控制。 受控組件與非受控組件在官網與國內網上的資料都不多，有些人覺得它可有可不有，也不在意。這恰恰顯示React的威力，滿足不同規模大小的工程需求。譬如你只是做ListView這樣簡...

    wpw 評論0 收藏0

  • React 進階設計與控制權問題

    摘要：盤點一下，模式反應了典型的控制權問題。異步狀態管理與控制權提到控制權話題，怎能少得了這樣的狀態管理工具。狀態管理中的控制主義和極簡主義了解了異步狀態中的控制權問題，我們再從全局角度進行分析。 控制權——這個概念在編程中至關重要。比如，輪子封裝層與業務消費層對于控制權的爭奪，就是一個很有意思的話題。這在 React 世界里也不例外。表面上看，我們當然希望輪子掌控的事情越多越好：因為抽象層...

    superw 評論0 收藏0

  • React 進階設計與控制權問題

    摘要：盤點一下，模式反應了典型的控制權問題。異步狀態管理與控制權提到控制權話題，怎能少得了這樣的狀態管理工具。狀態管理中的控制主義和極簡主義了解了異步狀態中的控制權問題，我們再從全局角度進行分析。 控制權——這個概念在編程中至關重要。比如，輪子封裝層與業務消費層對于控制權的爭奪，就是一個很有意思的話題。這在 React 世界里也不例外。表面上看，我們當然希望輪子掌控的事情越多越好：因為抽象層...

    rubyshen 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<