Antd:在文本框中展示格式化JSON

要想将对象转换为格式化 JSON 展示在文本框中,需要用到 JSON.stringify

JSON.stringify 方法接受三个参数:

  • value:必需,一个 JavaScript 值(通常为对象或数组)要转换为 JSON 字符串。
  • replacer:可选,一个函数或数组,用于在序列化过程中过滤或转换值。
  • space:可选,用于在输出 JSON 字符串中添加缩进、空格或换行符,以提高可读性。如果是一个数字,则它表示每个缩进级别的空格数;如果是一个字符串,则该字符串用作每个缩进级别的缩进。

具体代码:

import { Button, Input } from 'antd';export default () => {const value = {name: '张三',age: 20,gender: '男',address: {city: "北京",street: "朝阳路",zipCode: "100000"},phoneNumbers: ["13800000001", "13900000002"],isStudent: true,};const replacerFunc = (key, value) => {if (key === 'phoneNumbers') {return value.map(item => {// 将手机号中间四位替换为占位符return item.slice(0, 3) + '****' + item.slice(7);	})}return value;}const defaultValue = JSON.stringify(value, replacerFunc, 4)return (<Input.TextArea defaultValue={defaultValue}  />)
};

展示效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySql 安装,小白也可以学会成功安装的保姆级教程

MySql 安装 文章目录 MySql 安装1.Mysql下载1.1 访问下载链接1.2 选择合适版本1.3 下载安装包 2.MySql安装3.安装成功检测验证3.1 mysql自带控制台验证3.2 win系统控制台进入验证 4. mysql 配置path5. navicat 连接 mysql 1.Mysql下载 1.1 访问下载链接 MySQL Downloads 这里…

常用的权限模型介绍

概述 权限模型是一种用于定义和管理系统资源访问权限的规则集合。它规定了谁可以访问系统资源&#xff0c;以及在何种条件下可以访问。 常用的权限模型 DAC&#xff08;Discretionary Access Control&#xff09;&#xff1a;自主访问控制&#xff0c;是基于用户身份或组织属…

【自由看门狗配置及计算】

一、看门狗使用场景 看门狗是一个硬件计时电路&#xff0c;用来监测由软件故障导致的系统故障。 片上有两个看门狗定时器外设&#xff0c;自由看门狗定时器&#xff08;FWDGT也叫独立看门狗&#xff09;和窗口看门狗定时器&#xff08;WWDGT&#xff09;。 当嵌入式程序在运…

conda 创建、激活、退出、删除虚拟环境

一、conda 本地环境常用操作 #获取版本号 conda --version 或 conda -V #检查更新当前conda conda update conda #查看当前存在哪些虚拟环境 conda env list 或 conda info -e #查看--安装--更新--删除包 conda list&#xff1a; conda search package_name# 查询包 cond…

Centos 更换yum国内源的命令 -- yum更新速度太慢问题

【Linux】yum | 更新为国内源 | 删除源 | 删除repo | CentOS7_linux如何删除repo文件-CSDN博客

Linux程序调试优化(1)——内存占用详解及优化思路

文章目录 1.free查看总体的内存占用2./proc/$PID/status 查看某进程状态 linux开发最重要的两个参数&#xff0c;分别是内存以及CPU使用率&#xff0c;若内存出现严重不足&#xff0c;则在需要使用内存时&#xff0c;可能出现申请不到的情况&#xff0c;导致 OOM&#xff0c;L…

不出天府锋巢直播产业基地,即可激活电商直播产业、产教融合及人才培训服务

天府锋巢直播产业基地打造直播产业产教融合及人才培训服务新模式&#xff0c;携手政府、企业、高校&#xff0c;促进直播产业与创新人才双向奔赴&#xff0c;推进教学与实战深度融合&#xff0c;推动实习与就业无缝衔接。 各方资讯一应俱全 直播产业产教融合及人才培训服务全套…

ArrayList扩容

在Java中&#xff0c;ArrayList是一个动态数组&#xff0c;它允许在运行时改变其大小。当向ArrayList添加元素并且当前数组容量不足以容纳新元素时&#xff0c;ArrayList会自动扩容。 扩容原理 初始容量&#xff1a;当创建一个新的ArrayList时&#xff0c;可以指定一个初始容量…

DFS专题:力扣岛屿问题(持续更新)

DFS专题&#xff1a;力扣岛屿问题 开篇 每次做到DFS相关的题目都是直接跳过。蓝桥杯过后痛定思痛&#xff0c;好好学习一下DFS和BFS。先从DFS开始吧。 参考题解&#xff1a;nettee&#xff1a;岛屿类问题的通用解法、DFS 遍历框架 一、岛屿数量 题目链接: 200.岛屿数量 题…

x86_64/amd64和arm64区别

1.概况 x86_64&#xff08;也称为AMD64或x64&#xff09;和ARM64是两种不同的处理器架构&#xff0c;它们在设计理念、应用场景和性能特点上有所区别。 2.设计理念 x86_64架构起源于Intel的x86架构&#xff0c;它是对原始32位x86架构的扩展&#xff0c;增加了对64位计算的支…

Vue3学习05 一些API

Vue3-API 其它 API【shallowRef 与 shallowReactive 】shallowRefshallowReactive总结 【readonly 与 shallowReadonly】readonlyshallowReadonly 【toRaw 与 markRaw】toRawmarkRaw 【customRef】 Vue3新组件【Teleport】【Suspense】【全局API转移到应用对象】【其他】 其它 …

webuploader后端开发要点

百度fex团队的webuploader是一个很方便的web页面文件上传轮子&#xff0c;可以很方便地集成到前端html和js里&#xff0c;当然了&#xff0c;后端需要咱们自己开发实现。比较遗憾的是webuploader现在已经从百度的fex主页移除了&#xff0c;该项目可能已经不再维护了。 关于后端…

java小作业(9)----用函数实现斐波那契数列(第二遍)

代码&#xff1a; public class Main {public static void main(String[] args) {int n 20; // 你可以更改这个值来计算和输出前n个斐波那契数for (int i 0; i < n; i) {System.out.print(fibonacci(i) " ");}}public static int fibonacci(int n) {if (n <…

BackTrader 中文文档(一)

原文&#xff1a;www.backtrader.com/ 主页 欢迎来到 backtrader&#xff01; 原文&#xff1a;www.backtrader.com/ 一个功能丰富的 Python 框架&#xff0c;用于回测和交易 backtrader允许您专注于编写可重复使用的交易策略、指标和分析器&#xff0c;而不必花时间构建基础…

Android T多屏多显——应用双屏间拖拽移动功能(更新中)

功能以及显示效果简介 需求&#xff1a;在双屏显示中&#xff0c;把启动的应用从其中一个屏幕中移动到另一个屏幕中。 操作&#xff1a;通过双指按压应用使其移动&#xff0c;如果移动的距离过小&#xff0c;我们就不移动到另一屏幕&#xff0c;否则移动到另一屏。 功能分析…

振弦式渗压计的安装与防护:在水工建筑物中的关键应用

振弦式渗压计&#xff0c;作为一种高效的孔隙水压力或液体液位测量工具&#xff0c;广泛应用于水工建筑物、基岩内、测压管、钻孔、堤坝、管道和压力容器内。其安装和防护工作至关重要&#xff0c;直接关系到测量数据的准确性和仪器的使用寿命。本文将重点探讨振弦式渗压计在填…

RabbitMQ实战教程(1)

RabbitMQ 一、RabbitMQ介绍 1.1 现存问题 服务调用&#xff1a;两个服务调用时&#xff0c;我们可以通过传统的HTTP方式&#xff0c;让服务A直接去调用服务B的接口&#xff0c;但是这种方式是同步的方式&#xff0c;虽然可以采用SpringBoot提供的Async注解实现异步调用&…

Ue不消耗輸入

1、介紹 我們都知道ue裏面使用輸入時&#xff0c;都是在PlayerController裏面進行獲取&#xff0c; 使用官方的操作映射&#xff0c;軸映射&#xff0c;以及目前最新的增强型輸入 但是我們發現了一個問題 那就是輸入會被消耗 就是儅我鼠標按在一個按鈕上時 你另一個地方接受…

Elastic安装后 postman对elasticsearch进行测试

一、创建索引和mapping //id 字段自增id //good_sn 商品SKU //good_name 商品名称 //good_introduction 商品简介 //good_descript 商品详情 PUT http://IP:9200/shop { "mappings":{ "good":{ "properties":{ …

Qt显示对话框程序崩溃

问题描述 创建一个继承自QDialog的对话框DialogA&#xff0c;在主窗体显示之前进行显示&#xff0c;当执行DialogA的exec函数时&#xff0c;程序崩溃&#xff0c;提示&#xff1a;Critical error detected c0000374 问题排查 查看DialogA类中的内存创建是否存在异常&#xff0c…