成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React入門(mén)0x010: 表單

jsliang / 1329人閱讀

摘要：形成一個(gè)閉環(huán)，所以我們要綁定事件，并且將輸入的值賦值給中對(duì)應(yīng)的鍵。這種模式在中，特別是組件嵌套中經(jīng)常用到，我更愿意稱之為數(shù)據(jù)雙向流動(dòng)數(shù)據(jù)流動(dòng)閉環(huán)。而非受控組件資源源碼

0x000 概述

這一章講表單處理

0x001 栗子 
import React from "react"
import ReactDom from "react-dom"


class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: "",
            sex: "",
            content: "",
            formData: "",
        }
    }

    handleSubmit(e) {
        e.preventDefault()
        this.setState({
            formData: `name=${this.state.name}&sex=${this.state.sex}&content=${this.state.content}`
        })
    }

    render() {
        return 

            
填寫(xiě)表單

            
 this.handleSubmit(e)}>
                

                    
                

                

                    
                

                

                    
                

                
            

            

                

                
預(yù)覽

                

                    姓名:{this.state.name}
                

                

                    性別:{this.state.sex}
                

                

                    簡(jiǎn)介:{this.state.content}
                

            

            

                

                
表單提交

                
{this.state.formData}

            


        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

打開(kāi)瀏覽器查看效果：

0x002 總結(jié)

如果你只給input綁定了value，會(huì)發(fā)現(xiàn)無(wú)法輸入任何內(nèi)容，因?yàn)樵?b>react中，有受控組件的說(shuō)法，有點(diǎn)不大好理解，直接換種說(shuō)法比較好，在form表單中我們需要完成數(shù)據(jù)的雙向綁定。如果你只給input綁定了value，那么state的數(shù)據(jù)將會(huì)被綁定到input上就和你使用{this.state.name}一樣，但是這只是完成了數(shù)據(jù)到視圖的綁定，我們還好完成視圖到數(shù)據(jù)的綁定，以完成數(shù)據(jù)的雙向流動(dòng)。形成一個(gè)閉環(huán)，所以我們要綁定onChange事件，并且將input輸入的值賦值給state中對(duì)應(yīng)的鍵。

這種模式在react中，特別是組件嵌套中經(jīng)常用到，我更愿意稱之為數(shù)據(jù)雙向流動(dòng)、數(shù)據(jù)流動(dòng)閉環(huán)。而非受控組件......

0x003 資源

react

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97178.html

相關(guān)文章

  • React入門(mén)0x004：jsx 和數(shù)據(jù)渲染

    摘要：概述在中，渲染數(shù)據(jù)的形式有多種多樣，但是萬(wàn)變不離其中，都是用。當(dāng)然，自由也帶來(lái)混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會(huì)帶來(lái)噩夢(mèng)。 0x000 概述 在React中，渲染數(shù)據(jù)的形式有多種多樣，但是萬(wàn)變不離其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 這是一個(gè)文本, document.getEle...

    xingpingz 評(píng)論0 收藏0

  • React入門(mén)0x007: 生命周期概念

    摘要：概述上一章只是稍微了解了一下和相關(guān)的簡(jiǎn)單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來(lái)實(shí)現(xiàn)一個(gè)類似的吧。 0x000 概述 上一章只是稍微了解了一下state和setState相關(guān)的簡(jiǎn)單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念 這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來(lái)實(shí)現(xiàn)一個(gè)類似的吧。大凡事物從...

    Blackjun 評(píng)論0 收藏0

  • es6基礎(chǔ)0x010：增強(qiáng)的對(duì)象字面量

    摘要：概述在中，對(duì)象字面量的語(yǔ)法被增強(qiáng)了更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略之前更短的函數(shù)聲明如果屬性的屬性名和屬性值函數(shù)的函數(shù)名一致或者屬性值函數(shù)沒(méi)有函數(shù)名，可以省略關(guān)鍵字和屬性名之前可動(dòng)態(tài)計(jì)算的屬性名屬性名可以 0x000 概述 在es6中，對(duì)象字面量的語(yǔ)法被增強(qiáng)了 0x001 更短的屬性聲明 如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略 let...

    fox_soyoung 評(píng)論0 收藏0

  • 01.react入門(mén)必備，知識(shí)點(diǎn)梳理，生命周期全講解

    摘要：生命周期在版本中引入了機(jī)制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫(xiě)。只是在兄弟節(jié)點(diǎn)之間必須唯一受控組件使的成為唯一數(shù)據(jù)源。 react 基礎(chǔ) JSX JSX是一個(gè) JavaScript 的語(yǔ)法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。 React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)...

    Jiavan 評(píng)論0 收藏0

  • 前端相關(guān)匯總

    摘要：簡(jiǎn)介前端發(fā)展迅速，開(kāi)發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫(kù)框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫(kù)在滿足自己開(kāi)發(fā)需求的基礎(chǔ)上，然后最好可以對(duì)源碼進(jìn)行調(diào)研，了解和深入實(shí)現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

    BenCHou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<