react（五）-- state-form

最新推荐文章于 2024-06-18 20:33:51 发布
最新推荐文章于 2024-06-18 20:33:51 发布
阅读量343 收藏
点赞数 1
文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48942526/article/details/120857174
版权

state-form

1. 受控组件
       外来数据props/自己维护的状态state发生改变的时候，会导致组件的视图重新渲染，页面发生改变；这种组件受状态和属性变化的控制，称之为受控组件。
       特点：数据驱动（数据更新，页面就跟着更新），不用直接操作DOM。
2. 不受控组件
       组件不受状态和属性变化的控制，称之为不受控组件。
       特点：可以操作DOM（类似于传统的html表单操作），通过ref。
3. 模拟受控表单（简单版本）

<script type="text/babel">
    class App extends React.Component {
        state = { name: "", age: 18 }
        handleClick = () => {
            console.log('form data:', this.state);
        }
        render() {
            return (
                <div>
                    name:
                    <input type="text" value={this.state.name} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById("app"));
</script>

在这里插入图片描述

  • 当点击按钮时，虽然得到了数据，但是会报错
    – 这是因为，react不同于vue，不具有双向绑定
  • input 两个方向：属性绑定 和 事件绑定
    即：value： state => input
            input => state (需要onChange)
<script type="text/babel">
    class App extends React.Component {
        state = { name: "", age: 18 }
        handleClick = () => {
            console.log('form data:', this.state);
        }
        hanleChange=(e)=>{
            console.log(e.target.value);
            this.setState({
                name:e.target.value
            })
        }
        render() {
            return (
                <div>
                    name:
                    <input type="text" value={this.state.name} onChange={this.hanleChange}/>
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById("app"));
</script>

在这里插入图片描述

* 受控表单 => state，value 和 onChange，form 关系

  • onChange，form进行同步，将state数据同步到表单中；
  • form中的数据通过onChange传递回来，state中的数据通过value传过去

4. 模拟受控表单（复杂版本=>form中有多种数据输入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 挂载容器 -->
    <div id="app"></div>
    <!-- 引入库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            state = { name: "user", age: 18,single:false,desc:'introduction',hobby:'playing' }
            
            handleSubmit = (e) => {
                //搜集表单数据
                console.log('form data:', this.state);
                //阻止默认行为
                e.preventDefault();
            }
            
            hanleChange1=(e)=>{
                console.log(e.target.value);
                this.setState({
                    name:e.target.value
                })
            }
            hanleChange2=(e)=>{
                console.log(e.target.value);
                this.setState({
                    age:e.target.value
                })
            }
            hanleChange3=(e)=>{
                console.log(e.target.checked);
                this.setState({
                    single:e.target.value
                })
            }
            hanleChange4=(e)=>{
                console.log(e.target.value);
                this.setState({
                    desc:e.target.value
                })
            }
            hanleChange5=(e)=>{
                console.log(e.target.value);
                this.setState({
                    hobby:e.target.value
                })
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" value={this.state.name} onChange={this.hanleChange1}/><br/>
                        age:<input type="number" value={this.state.age} onChange={this.hanleChange2}/><br/>
                        single:<input type="checkbox" value={this.state.single} onChange={this.hanleChange3}/><br/>           
                        desc:<textarea value={this.state.desc} onChange={this.hanleChange4}></textarea><br/>
                        <select name="" value={this.state.hobby} onChange={this.hanleChange5}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述
5. 优化：模拟受控表单（复杂版本=>form中有多种数据输入）

  • 根据4，我们可以看出：hanleChange1——hanleChange5有很多相似的地方
  • 不同之处：
    key动态 ， value:e.target.value 注意：e.target.checked
    this.setState({
           key:value
    })
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 挂载容器 -->
    <div id="app"></div>
    <!-- 引入库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            state = { name: "user", age: 18,single:false,desc:'introduction',hobby:'playing' }
            handleSubmit = (e) => {
                //搜集表单数据
                console.log('form data:', this.state);
                //阻止默认行为
                e.preventDefault();
            }

            handleChange=(e)=>{
                let target = e.target
                let key = target.name
                let type = target.type
                let value = target.value
                //注意：checkbox
                let value = type=='checkbox'?target.checked:target.value
                // this.setState({
                //     key:value  //key写死了，相当于给原来的对象中追加了一个key,值为value
                // })
                this.setState({
                    [key]:value  //key动态的
                })
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" name="name" value={this.state.name} onChange={this.hanleChange}/><br/>
                        age:<input type="number" name="age" value={this.state.age} onChange={this.hanleChange}/><br/>
                        single:<input type="checkbox" name="single" value={this.state.single} onChange={this.hanleChange}/><br/>           
                        desc:<textarea  name="desc" value={this.state.desc} onChange={this.hanleChange}></textarea><br/>
                        <select name="name" value={this.state.hobby} onChange={this.hanleChange}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述

balance~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React-State和表单
qq_40007317的博客
05-25 274
1、定义State （1）在constructor中实现state （2）在constructor中通过bind绑定事件函数（事件函数是用来改变状态） （3）在事件函数内部使用setState函数更改状态 （4）在组件中的render函数中使用该状态 （5）在组件上需要设置监听事件，去触发事件函数的执行 import React from 'react'; class Show extends React.Component { constructor(props) {
state-表单
weixin_33828101的博客
11-29 134
/*** 需求: 定义一个组件,可以将用户在输入框内输入的内容 进行实时显示** 分析:组件与用户交互过程中,存在状态的变化,即输入框的值** */var Input = React.createClass({ getInitialState:function () { return{ value:"请输入" } }, handl...
props、state、forms
HMing的博客
09-05 181
{}用来内嵌任何JS表达式JSX属性JS核心分为三大块：Es6、DOM、WindowBABEL编译器：可以在线编译html语法生成对应的react语法 **自定义组件第一个字母大写：用于区别普通的对象HTML被编译成了什么？ 它是一种语法糖--React.createElement() 是TeactElment对象Props(属性) 组件就像函数一样，接受特定的输入(pr...
[vuex]状态管理vuex
前端
04-22 1626
vuex 状态管理vuex，之前一般都是通过一个全局js文件实现全局设置，在vue中通过vuex进行管理 简介 vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成到了官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 “store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象
解决关于react antd Form组件不能更新state的问题
qq_45830543的博客
04-25 1356
首先，我先把我的问题说一说。 就是我在引用antd的组件库在写登录注册页面时，用到了
react-form-state-hooks
05-08
欢迎来到react-form-state-hooks :waving_hand: 使用挂钩和有用的组件管理您的React表单状态。 :house: 安装 npm install react-form-state-hooks 浏览器兼容性 该库使用ES2020方法，因此对于支持旧版浏览器或...
mobx-react-form：React性MobX表单状态管理
02-05
••• • MobX React表格 React式MobX表单状态管理 ...npm install --save mobx-react-form 选择并设置验证插件 有关支持的软件包的更多信息，请参见 。 下面，我们使用validatorjs包创建一个plugins对象
react-use-form-state：:page_facing_up:用于管理表单和输入状态的React钩子
02-05
React使用形式状态 ... react-use-form-state是一个很小的React Hook，它试图使用您熟悉的本机表单输入元素来！ 入门 首先，向您的项目添加react-use-form-state ： npm install --save react-use-form-state
react-baby-form:易于使用的表格
05-06
npm install --save react-baby-form 用法 import React , { Component , createRef } from 'react' ; import BabyForm , { submit } from 'react-baby-form' ; class Base extends Components { formRef = ...
react-form-input
05-15
安装$ npm install react-form-input --save例子 import Input , { validators , transformers } from 'react-form-input' ;class Form extends React . Component { constructor ( props , context ) { super ( ...
React学习（JSX+组件+state+表单）
大大大鸡腿的博客
09-03 585
ReactJSX声明元素渲染元素{}组件 JSX JSX是一种JavaScript语法的拓展，React中就是用JSX来描述用户界面的。 在JavaScript中写JSX代码，必须要有： <script type="text/babel"></script> 在写js或jq的时候，我们可以不用写type，但这个一定要写，引用JSX文件也要写。 元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，而这个元素就是我们在js中的对象。 声明元素 var
前端框架React - State 和 生命周期
oscar92420aaa的博客
03-26 1174
1.Introduction of state the fact that the Clock sets up a timer and updates the UI every second should be an implementation detail of the Clock. 事实上组件的功能和更新UI的代码应该是组件自己的具体实现细节。 ReactDOM
使用函数式组件form表单重新赋值为啥不更新_玩转 React 表单 —— Refs 的运用
weixin_36383467的博客
02-04 1401
原文地址：React Forms: Using Refs原文作者：Loren Stewart译者：萌萌校对者：小 boyReact 提供了两种从 <form> 元素中获取值的标准方法。第一种方法是实现所谓的受控组件 (可以看我博客里发表的文章) ，第二种方法是使用 React 的 ref 属性。受控组件很重，被展示的值和组件的 state 绑定是它的特性。我们通过执行一个附着在 for...
React开发总结6:Form表单
huihui_999的博客
05-29 3879
表单是应用程序中最重要的部分之一.通过表单,我们可以从用户那里获得丰富的输入.我们从基础一开始做起,这里不使用任何UI框架,用react自身来实现对Form表单的控制. 1.基础按钮 import React from 'react'; const content = document.createElement('div'); document.body.appendChild(content); module.exports = class extends React.Component {
React Props/State/Forms 属性和状态
前端博客
09-24 475
状态(State) 和 属性(Props) props 是组件对外的接口，state 是组件对内的接口。 组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对...
react之onChange事件
热门推荐
mapbar_front的博客
05-30 2万+
如何获取输入框的值是react中必须面对的问题，目前比较好的方式与两种，一种是使用ref，而另一种是使用onChange事件，它通过事件对象的方式获取输入值。 具体使用方式如下：import React,{ Component } from "react";import { render } from "react-dom"; class Main extends Component{ c
form提交后台注解拿不到数据_react的form表单：关于获取表单数据
weixin_39523887的博客
11-21 506
被师傅分配一个任务，是修改原有的界面的一个组件，就是将自定义的input组件换成select组件，但是由于返回值不一样，导致我需要对相应组件的返回值加一层封装，不然就要改后台的数据：由于select组件的可选项是固定的，那么这里可以走一个捷径，就是说可以利用setState来改变props传过来的值。在这里我陷入一个误区，在一篇博客中找到了答案：react中的setState的使用和深入理解 - ...
antd state使用_ANTD form实现
weixin_35080040的博客
01-13 482
中秋几天 玩 看电影 聊天 还不错之前重构有需求是需要获取保存子组件的部分值，antd的表单有相同的需求，参考下1.因为没自己写，看之前先猜，简单的想了下实现方式，首先 定义初始值 --+ 修改值 --+ 获取保存值最基本的就是上面三个功能， 定义初始值 再加上React的声明式语法，需要返回onChange 与 value ，id， onChange可以被调用来修改之前保存的值，自己的实现方...
React 中的 ErrorBoundary
最新发布
hawk2014bj的博客
06-18 469
React 框架中通过 getDerivedStateFromError 方法进行异常处理，项目开发可以自定义一个类组件并实现该方法进行组件异常处理。
react，antd-design
05-30
好的，如果您使用的是 React 和 antd-design，可以考虑使用 antd 的 `Form` 和 `Form.Item` 组件来实现表单项的排序。具体步骤如下： 1. 将表单项的数据存储在一个数组中。例如： ```javascript const items = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值