reac笔记_13 form表单元素中 input/defaultValue + useState/useRef

已于 2023-01-14 18:02:51 修改
阅读量591 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
于 2023-01-04 15:49:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260366/article/details/128548515
版权

目录

原生html元素

原生html是不存在双向绑定的！以input标签举例说明

input属性
  • value：当前表单元素的值
  • onchange：失去焦点且值发生改变时触发
示例1
<input type="text" value="111">

上述代码在页面显示结果如下：
在这里插入图片描述

示例2

在案例1上稍作修改

  <input id='inputbox' type='text'/>
  <button id="btnbox">点击修改value值</button>
  <script>
    const inputele = document.getElementById('inputbox')
    const btnele = document.getElementById('btnbox')
    // 赋值-在页面显示如案例1
    let inputvalue = '111'
    inputele.value = inputvalue

    // 修改inputvalue值 -> 通过代码修改
    // 页面没有发生变化 -> 不会重新渲染
    btnele.onclick = function(){
      inputvalue = '222'
      console.log(inputvalue) // 222
    }

    //修改value值为11111 -> 在页面修改元素的value属性值
    // -> 页面变化，但是inputvalue变量值并没有发生变化
    inputele.onchange = function(e){
      console.log(e.targe.value) // 11111
      console.log(inputvalue) // 111
    }
  </script>
  • 通过上述案例可以看出页面发生改变不会更改变量的值，变量的值改变不会让页面变化 -> 原生input标签的value属性不存在双向绑定
  • 上述代码的赋值
     let inputvalue = '111'
 inputele.value = inputvalue
    其实本质就是
    inputele.value = '111'
    赋值之后就和原来的 inputvalue属性不存在关联关系了，相当于赋了一个默认值，因此 -> 修改inputvalue属性值不会影响元素的value属性，修改value属性也不会影响inputvalue属性值。

react中

在react中也不存在双向绑定！每次更新页面和值都需要我们自己去调用指定的api来触发。

受控组件与非受控组件

react中form表单元素分为受控组件与非受控组件
在这里插入图片描述

属性

react中的input

  • defaultValue属性：默认值
  • value属性：当前表单元素的值
  • onChange: 表单元素值改变时触发
error - input标签value属性使用
  • 今天想添加一个input标签，默认值为222，代码如下：
    function Mycomponent(){
  return (
    <ul>
      <li><input value=‘222’/></li>
    </ul>
  )
}
ReactDOM.render(<Mycomponent />, document.getElementById('test'))
  • 报错如下
    在这里插入图片描述
    • 错误： 在react中input标签存在value元素则表示元素为受控组件，需要添加onChange方法
    • 原因： 在react中 没有 添加onChange方法的input标签为只读的，不能添加value 属性。 若是想添加默认值可以 使用 defaultValue属性
  • 修正
    function Mycomponent(){
  return (
    <ul>
      <li><input defaultValue='222' /></li>
    </ul>
  )
}
ReactDOM.render(<Mycomponent />, document.getElementById('test'))
示例 - useState

在这里插入图片描述
案例1：如上图，表格数据，每次重新获取之后都要更新组件页面，因此需要使用useState hook定义数据

import { useState, useEffect } from "react"
import { Table } from 'antd' 
export default function UseDefaultValue (){
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ]  
  const [data,setData] = useState({}) // 存储表格数据
  function getList(){
    // 模拟接口获取表格数据
    setTimeout(()=>{
      const res = {
        list:[
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          }
        ],
        count:2
      }
      setData({
        count: res.count,
        list:res.list
      })
    },200)
  }
  useEffect(()=>{
    getList()
  },[])
  return(
    <div>
      <Table dataSource={data.list} columns={columns} />
    </div>
  )
}
示例 - input标签defaultValue属性+ useRef

在这里插入图片描述

案例1：如上图，现在存在模糊查询，通过搜索关键字筛选符合条件的表格列表数据

  • 此时变量可以使用 uesRef 定义 ，使用defaultValue属性进行赋值
    • [1] defaultValue属性为默认值，当在页面输入搜索关键字时页面自动发生变化 并且 可以通过onChange事件获取用户输入的值来调用接口获取数据；
    • [2] 我们并没有通过代码修改 属性值，不需要回显数据，因此使用uesRef定义数据即可；
import { useRef, useState, useEffect } from "react"
import { Table } from 'antd' 
export default function UseDefaultValue (){
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  const paramsData = useRef({
    keyword:'',
    page:1,
    size:10
  })
  const [data,setData] = useState({}) // 存储表格数据
  function getList(){
    // 模拟接口获取表格数据
    setTimeout(()=>{
      console.log('params', paramsData.current)
      const res = {
        list:[
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          }
        ],
        count:2
      }
      setData({
        count: res.count,
        list:res.list
      })
    },200)
  }
  useEffect(()=>{
    getList()
  },[])
  return(
    <div>
      <input 
        type="text" 
        placeholder="请输入搜索关键字"
        defaultValue={paramsData.current.keyword}
        onChange={ e =>{
          paramsData.current.keyword = e.target.value
          // 重新获取数据
          getList()
        }}
      />
      <Table dataSource={data.list} columns={columns} />
    </div>
  )
}
示例 - input标签defalutValue属性重新赋值

在这里插入图片描述

案例：如上图，存在一个编辑框，点击右侧编辑框更改编辑框数据

import { useRef } from "react"
import { Button } from 'antd' 
export default function UseDefaultValue (){
  const paramsData = useRef({
    keyword:'',
    page:1,
    size:10
  })
  return(
    <div>
      <input 
        type="text" 
        placeholder="请输入搜索关键字"
        defaultValue={paramsData.current.keyword}
        onChange={ e =>{
          paramsData.current.keyword = e.target.value
          // 重新获取数据
        }}
      />
      <Button type='link' onClick={()=>{
        paramsData.current.keyword = '222222'
      }}>更改输入框数据</Button>
    </div>
  )
}
  • 显而易见，在点击按钮时页面数据并不会改变
    • 数据使用的 hook useRef，值发生改变时不会更新组件！
      在这里插入图片描述
import { useState } from "react"
import { Button } from 'antd' 
export default function UseDefaultValue (){
  const [num, setNum] = useState(0);
  return (
    <>
        <input defaultValue={num} />
        <Button onClick={() => setNum(666)}>Button</Button>
    </>
  )
}
  • 在上述代码中使用的 hook useState 定义数据，感觉在点击按钮时页面数据会发生变改，但是实际并没有改变， 此时需要在元素上添加key值
import { useState } from "react"
import { Button } from 'antd' 
export default function UseDefaultValue (){
  const [num, setNum] = useState(0);
  return (
    <>
        <input defaultValue={num} key={num}/>
        <Button onClick={() => setNum(666)}>Button</Button>
    </>
  )
}

原因
这需要看一下渲染逻辑：

  • 初始化时：
    • react 内部会获取传入的 defaultValue，然后同时挂载到 node 的 value 和 defaultValue上，这样初次渲染的时候页面就会展示传入的默认属性；
    • 给组件的每个元素添加一个key值
  • 更新时：
    • 比较key值，key值相同 -> 复用；key值不同 -> 重新创建元素
示例 - input标签defalutValue属性重新赋值-弹框编辑

在这里插入图片描述

案例1:现在存在如上表格数据，点击按钮显示弹框进行编辑

import { useRef, useState, useEffect} from "react"
import { Table, Button,  Select, Modal} from 'antd' 

export default function UseDefaultValue (){
  const classObj = {
    1: '七年级1班',
    2: '七年级2班',
    3: '七年级3班',
    4: '八年级1班',
    5: '八年级2班',
    6: '九年级1班'
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title:'班级',
      dataIndex: 'class',
      key: 'class',
      render: value => classObj[value]
    },
    {
      title:'编辑',
      dataIndex:'key',
      key:'key',
      render:(id,value) => (
        <Button type='link' onClick={()=>{
          itemInfo.current = value
          setodalOpen(true)
        }}>编辑班级</Button>
      )
    }
  ]
  const paramsData = useRef({
    keyword:'',
    page:1,
    size:10
  })
  const [data,setData] = useState({}) // 存储表格数据
  const [isModalOpen, setodalOpen]= useState(false) // 是否编辑
  const itemInfo = useRef({})
  function getList(){
    // 模拟接口获取表格数据
    setTimeout(()=>{
      const res = {
        list:[
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
            class:'5'
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
            class:'3'
          }
        ],
        count:2
      }
      setData({
        count: res.count,
        list:res.list
      })
    },200)
  }
  useEffect(()=>{
    getList()
  },[])
  return(
    <div>
      <input 
        type="text" 
        placeholder="请输入搜索关键字"
        defaultValue={paramsData.current.keyword}
        onChange={ e =>{
          paramsData.current.keyword = e.target.value
          // 重新获取数据
          getList()
        }}
      />
      <Table dataSource={data.list} columns={columns} />
      <Modal 
        title="编辑班级" 
        visible={isModalOpen} 
        onOk={()=>{
        // 调用接口保存编辑数据
        }} 
        onCancel={()=>{
          setodalOpen(false)
        }}
      >
        <Select
          defaultValue={itemInfo.current.class}
          style={{
            width: 150,
          }}
          options={[
            {
              value: '1',
              label: '七年级1班',
            },
            {
              value: '2',
              label: '七年级2班',
            },
            {
              value: '3',
              label: '七年级3班',
            },
            {
              value: '4',
              label: '八年级1班',
            },
            {
              value: '5',
              label: '八年级2班',
            },
            {
              value: '6',
              label: '九年级1班',
            },
          ]}
    />
      </Modal>
    </div>
  )
}

在这里插入图片描述
若是给modal添加属性destroyOnClose,在关闭弹框时销毁组件，在打开弹框时重新渲染，则每次都会显示正确的默认值。
在这里插入图片描述

111
import { useRef, useState, useEffect } from "react"
export default function UseDefaultValue (){
  const paramsData = useRef({
    keyword:'',
    page:1,
    size:10
  })
  const [data,setData] = useState({})
  function getList(type){
    setTimeout(()=>{
      console.log('params',paramsData.current)
      setData({
        count: 1,
        list:[{name:'chaochao'}]
      })
      if(type){
        paramsData.current.keyword = '11111'
      }
    },200)
  }
  useEffect(()=>{
    getList('first')
  },[])
  return(
    <div>
      <input 
        type="text" 
        defaultValue={paramsData.current.keyword} 
        placeholder='请输入搜索关键字'
        onChange={e=>{
          paramsData.current.keyword = e.target.value
          getList()
        }
      } />
    </div>
  )
}
  • 上述代码运行：在200ms之后窗口值变为222并且重新发送请求获取数据
    在这里插入图片描述
  • 原因：在 setData 时会 更新组件，因此 input标签会重新赋默认值为11111

何时使用defaultValue属性与value属性？

  • 若是想进行初始化赋值就使用 defaultValue属性；
  • 若是想输入的内容反馈到输入框，就要用 onChange 事件改变状态属性的 value 属性值；
乖女子@@@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
显示/光电技术中的甚短距离光传输技术（VSR）简介
11-13
现有的同步光网络系统是按长距离骨干网设计的，采用的是比较昂贵的串行光发射和接收设备，对光纤线路的 要求较高，必须对整个光纤链路进行细致地设计、模拟。...　甚短距离光传输（Very Short Reac
React+AntDesign：在Form表单内使用控件的value或defaultValue属性出现invalid Warning非法警告
Alanrnzearn的博客
11-09 1426
问题简述 在用到AntDesign的Form表单时往往有时候会用到一些选择器，通常有时候选择器本身会有一个默认值，我们往往习惯用value或defaultValue去注入默认值，但是实际上，在Form表单内写这些选择器组件的时候往往就会出现非法警告。 出现原因 选择器基本上都是写在表单字段组件内，用于数据双向绑定、校验、布局等，因为控件是被Form.Item 包装的，且被设置了 name 属性的 ，表单控件会自动添加 value，数据同步将被 Form 接管，这会导致不能用value 或 defaultVa
react Input的defaultValue和value属性学习
热门推荐
黄彪博客
07-15 1万+
文章目录文章参考问题描述状态属性受控组件非受控组件为什么要有受控组件？个人理解案例 文章参考 react 表单 问题描述 在工作中用antdDesign UI组件写Input表单的时候，发现需要同时设置默认值和用户可以手动输入改变值（修个表的数据），发现搞不清defaultValue和value的作用，能否同时使用？彼此是否会产生影响？编译是否会报错？ 状态属性 表单元素有这么几种属于状态的属......
JQuery defaultvalue
weixin_34067049的博客
12-16 793
定义和用法 defaultValue 属性设置或返回文本框的初始内容。 注释：文本框的初始值是位于 <textarea> 和 </textarea> 标签之间的文本。在表单被重置时，文本框将被恢复为整个值。改变这个属性的值会改变文本框中当前显示的文本。 语法 textareaObject.defaultValue=text 实例 下面的例子提示出了文本框...
react 中的input 只读属性
star094606的博客
12-17 1872
正确的两种写法： 一、HTML中 <input type="text" className="lg-input-o" autoComplete="off" plac...
react 更新input 默认值setfieldsvalue_React系列（二）组件三大属性
weixin_39961855的博客
12-06 509
之前曾经提到过，React是面向组件开发的，每一个组件是一个类，React核心库通过实例化组件类，使用diff算法将JSX语法标签最终渲染为真实的DOM。今天总结一下组件的三大属性，即：state，props，refs；一、三大属性之 “state“state被称为组件的状态机，通过更新组件的state重新渲染组件。state内容更新后，必须要调用 setState方法重新渲染，达到更新...
simple.rar_D2Dsimple_d2d_simple_vscode Simple_vscode Simple Reac
07-15
code of D2D communiction
计算机专业java笔试题-building-java-web-apps-checklist::check_mark_button:以正确方式构建Java+Angular/Reac
06-17
中构建 Web 应用程序。 :Japanese_symbol_for_beginner: 在开始开发之前 软件架构是一组设计决策，如果做出错误，可能会导致您的项目被取消。 — 伊恩·伍兹 做出架构决策。 完成技术堆栈。 为您的开发创建一个多...
51单片机modbus.zip_51modbus_modbus 单片机_modbus 51_modbus 51单片机_reac
07-15
51单片机MODBUS主机通信程序，平台KEIL4。使用MODBUS SLAVE测试成功。
reac+springboot.zip
07-02
react+Spingboot的一个前后端分离的简单增删查改项目，两个页面，登录和首页（列表显示）适用于初学者
React ant Design 踩坑 input 的 defaultValue 重新赋值 不生效
Codernmx
08-15 7023
在官方文档中有一个value 和一个defaultValue，在使用defaultValue的时候你会发现，展示默认的值是可以的，但是如果你修改了那个值页面数据是不会更新的。如果你去使用value的时候又会发现他的输入框你输入不了任何值。 解决办法： <Input key={this.state.name} defaultValue={this.state.name} /> 加一个key 在看网上其他解决方案的时候看到可以通过，onChange来得到他event.target.value的
表单文本框文字提示 InputDefault Query 插件
wyqjx
06-13 193
InputDefault 是一个jQuery 插件，用来实现对文本输入框的默认值的自动切换，当鼠标移开时自动显示默认值，当输入框获取输入焦点时，删除默认值。其作用就不作详细描述了，直接看演示。 ...
react Input 的defaultValue不随着state变化
wangweiscsdn的博客
08-24 4020
第一次遇到input的defaultValue不会变化，或者只记录前一次的数据，后面的数据不会及时更新，而value是不能改变input的值的 解决办法就是给父级的div或者form添加一个可变的key值 class TeacherInfoWidget extends React.Component{ render(){ const {onChange,teacherInfo,No
使用useRef（）父組件獲取子組件form對象
weixin_46848830的博客
07-22 313
react見聞
react 中如何修改 input 的 defaultValue
花神的博客
12-28 4973
react 中如何修改 input 的 defaultValue 在使用 react 进行开发时，我们一般使用类组件的 setState 或者 hooks 实现页面数据的实时更新，但在某些表单组件中，页面的数据却无法更新，令人苦恼，比如下面这个例子： import React, { useState } from "react"; function Demo() { const [num, setNum] = useState(0); return ( <>
1-4、React中form表单下的input框初使用以及列表渲染
你华还是你华
04-24 3641
文章系列 1、React环境搭建，以及初识jsx语法。 2、React熟悉，jsx语法以及变量绑定和三种渲染语句 3、React绑定属性和事件，以及事件的响应。 大家好，我是Counterrr 不忘初心，砥砺前行 本文目录 一、根据input框以及列表渲染做了小项目展示； 二、input框初使用； 三、列表渲染； 四、小项目代码解读； 一、小项目展示 ...
在React中使用useRef控制表单输入，解决表达内容自动填充的问题
weixin_51719919的博客
08-11 704
要完成一个填表之后返回更新表单，要求表单内容在用户返回去更新的时候之前的信息已经填充的功能，我使用了useRef控制表单，但是一直无法获取到历史信息将其填充到表单上。 本应该在点击图标为铅笔的按钮之后页面跳转到更新新闻并且相关信息填充到表单上面 我的错误的代码如下： useEffect(() => { axios.get('http://localhost:5000/news?id=' + props.match.params.id + '&_expand=category&
react非受控组件useRef方法
舜岳的博客
12-29 1064
效果图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"></div&g...
React input输入相关：受控方式无法更新对象类型数据（函数式组件 useState）
qq_51574759的博客
12-29 731
这个问题的关键其实我们都知道：**state不能通过直接赋值的方式修改，这也是我们为什么要解构出setUserInfo的原因** 到这里你可能很疑惑，我是用的`setUserInfo`呀？ 但是看上面传入`setUserInfo`中的函数，传入函数是为了解决需要用到之前的state值的需求，这个`pre`就是之前的 state，可是在这个函数中，却直接使用了`pre.account = e.target.value`这样的形式，**用 = 给一个 state 赋值了！** 既要获取之前的state值，
react 和 @types/reac版本对应
最新发布
07-15
React 和 @types/react 版本对应关系如下： - React 16.x 对应 @types/react 16.x - React 17.x 对应 @types/react 17.x 注意：React 的主要版本之间可能会有一些不兼容的变化，因此在升级 React 版本时，请确保你...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值