React入门0x010: 表单

jsliang 发布于2019-08-23 11:35 / 1289人阅读

摘要：形成一个闭环，所以我们要绑定事件，并且将输入的值赋值给中对应的键。这种模式在中，特别是组件嵌套中经常用到，我更愿意称之为数据双向流动数据流动闭环。而非受控组件资源源码

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

源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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