React入門0x010: 表單

jsliang 發布于2019-08-23 11:35 / 1318人閱讀

摘要：形成一個閉環，所以我們要綁定事件，并且將輸入的值賦值給中對應的鍵。這種模式在中，特別是組件嵌套中經常用到，我更愿意稱之為數據雙向流動數據流動閉環。而非受控組件資源源碼

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 
            填寫表單
             this.handleSubmit(e)}>
                
                    
                        姓名:
                         this.setState({name: event.target.value})}
                        />
                    
                
                
                    
                        性別:
                        
                    
                
                
                    
                        簡介:
                         this.setState({content: event.target.value})}>
                    
                    
                
                
            
            
                
                預覽
                
                    姓名:{this.state.name}
                
                
                    性別:{this.state.sex}
                
                
                    簡介:{this.state.content}
                
            
            
                
                表單提交
                {this.state.formData}
            

        
    }
}

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

打開瀏覽器查看效果：

0x002 總結

如果你只給input綁定了value，會發現無法輸入任何內容，因為在react中，有受控組件的說法，有點不大好理解，直接換種說法比較好，在form表單中我們需要完成數據的雙向綁定。如果你只給input綁定了value，那么state的數據將會被綁定到input上就和你使用{this.state.name}一樣，但是這只是完成了數據到視圖的綁定，我們還好完成視圖到數據的綁定，以完成數據的雙向流動。形成一個閉環，所以我們要綁定onChange事件，并且將input輸入的值賦值給state中對應的鍵。

這種模式在react中，特別是組件嵌套中經常用到，我更愿意稱之為數據雙向流動、數據流動閉環。而非受控組件......

0x003 資源

react

源碼

GPU云服務器云服務器 react _React React 源碼 react cdn

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

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

React入門0x004：jsx 和數據渲染

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

xingpingz 2019-08-23 11:27 評論0 收藏0
React入門0x007: 生命周期概念

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

Blackjun 2019-08-23 11:30 評論0 收藏0
es6基礎0x010：增強的對象字面量

摘要：概述在中，對象字面量的語法被增強了更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略之前更短的函數聲明如果屬性的屬性名和屬性值函數的函數名一致或者屬性值函數沒有函數名，可以省略關鍵字和屬性名之前可動態計算的屬性名屬性名可以 0x000 概述在es6中，對象字面量的語法被增強了 0x001 更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略 let...

fox_soyoung 2019-08-23 13:09 評論0 收藏0
01.react入門必備，知識點梳理，生命周期全講解

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

Jiavan 2019-08-26 10:36 評論0 收藏0
前端相關匯總

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

BenCHou 2019-08-23 12:31 評論0 收藏0