当React 中 setState({key:value})的key是一个变量时

最新推荐文章于 2024-06-29 15:48:07 发布

乌龟不背壳

最新推荐文章于 2024-06-29 15:48:07 发布

阅读量379

点赞数

分类专栏： react学习日志

本文链接：https://blog.youkuaiyun.com/nalan77/article/details/103562664

版权

react学习日志专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在React应用中使用BraftEditor组件进行编辑器状态的设置与获取。通过具体的代码示例，展示了如何利用this.setState方法设置编辑器状态，并通过state属性获取已设置的编辑器状态值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如何设置

参考链接：https://blog.youkuaiyun.com/qq_35333936/article/details/89227437

this.setState({
    [this.props.editorId]: BraftEditor.createEditorState("wom",{editorId: this.props.editorId}),
    // editor_question_title: BraftEditor.createEditorState(null,{editorId: this.props.editorId}),
})

2、如何获取

如果需要获取key（变量）的值，可以通过以下写法获取

this.state[this.props.editorId]

参考链接：https://blog.youkuaiyun.com/weixin_30783629/article/details/96292200

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

乌龟不背壳

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React-Hooks用法：useState()、useEffect()、useRef()

Coding and studying

08-08

1152

告别难以理解的Class解决业务逻辑难以拆分的问题使状态逻辑复用变得简单可行函数组件在设计思想上，更加契合React的理念1.需求描述:自定义一个hook函数，实现获取滚动距离Yconst [ y ] = useWindowScroll() y就是滚动到顶部的距离每次都有两次控制台输出是因为：React的StrictMode严格模式，忽略第二个输出即可。import {..................

React 中 setState({key:value})，key是一个变量时，react会直接把它当作字符串

羽公子的博客

04-12

3270

React 中 setState({key:value})，key是一个变量时，react会直接把它当作字符串开始一直没发现问题所在，打印this.state.key发现值也是对的，后来发现是react直接把它当作字符串了 import React, { Component } from 'react'; import { Button } from 'antd'; class Demo e...

参与评论您还未登录，请先登录后发表或查看评论

React 中setState({key:value}) key值动态变化，如何动态设置key的值-setState的key为动态

初心 - 杨瑞超个人博客

12-04

1974

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 有时候我们需要使用后台给的数据作为state的key值，自己写又太麻烦，直接动态即可： state = { link: '', } onShow = (key) =&gt; { this.setState({ [key]: 'www.chao99.top' }); ...

react state中如果key需要的是变量

qq_35059678的博客

07-11

662

1. 如果我们不用中括号，这里的key-"type"就会被当成字符串处理 onTabChange = (key, type) => { console.log(key, type); this.setState({ [type]: key }); }; ...

reactHooks+TS：富文本braft-editor常见用法

君莫笑

01-06

6105

关于reactHooks+TS中富文本插件btaft-editor的使用。

React 之braft-editor富文本的图片上传

ili_ii的博客

04-03

1063

使用背景：在微信小程序中的的商城中的商品详情。使用uniapp的 rich-text 展示多张图片的。在媒体这个可以选择上传图片。自己会把图片转成base64，但是所占体积太大了。，先把图片上传到服务器上，然后把图片链接放到富文本里面。把媒体（'media'）工具栏去掉。

React和Vue中监听变量变化的方法

明月如霜丶

12-09

3650

React 中本地调试React代码的方法 yarn build 场景假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。 16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行prop...

React快速上手（一）：万字整理jsx基础语法

最新发布

m0_60353051的博客

06-29

792

state即状态，用来存储组件数据的，复杂组件（类式组件）才有state，简单组件（函数式组件）没有state。render(){// this指向实例对象，state就是实例对象生成的，通过this.state即可获取到！（1）state是组件最重要的属性，值是对象（key-value形式）；（2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（响应式）；（3）注意事项：A. 组件中render的this为组件实例对象；

项目经验：react中使用typescript

weixin_44828005的博客

08-16

783

前言如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案使用规则在 react 中使用 ts 的几点原则和变化：所有用到jsx语法的文件都需要以tsx后缀命名使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明函数组件 import React from 'react

一份关于React框架的框架教程！！！！！

06-16

- **Webpack**：一个模块打包器，用于处理和优化前端资源。 #### 二、准备工作和环境设置 - **安装Node.js和npm/yarn**： - Node.js是运行React项目的必备环境，同时它也自带了npm（Node Package Manager）。 -...

使用braft-editor实现简易版即时写文档并预览的富文本编辑器

今天鸭鸭不想出去玩

06-12

2002

最近在看各个富文本编辑库的时候，有点好奇，于是对比了一些，有draft-js，Slate.js。但是这些基本都是英文库，简单demo无法满足需求，比如插入截图和表格，这些复杂结构的数据，实现这些，必须自定义扩展，要想做到这些，通读一遍文档基本是必须，且内含的天坑，估计也是数不胜数。也不错，当然人家是吃这口饭的，就单独说插入表格这个吧，（浅吐槽一句csdn写文章的插入表格都还蛮low的）还有插入模板，语雀做的非常棒了，选中表格也能即时删除某列，更别说插入模板了。的文档就做的蛮好的，

React 中setState({key:value}) key值动态变化，如何动态设置key的值

徐同保的专栏

12-07

4484

第一种写法： import React, { Component } from 'react' class App extends Component { constructor(props) { super(props) this.state = { username: '', age: '', sex:'' } } ...

欢迎使用优快云编辑器

KHOST的博客

10-24

294

1024欢迎你欢迎使用Markdown编辑器欢迎使用Markdown编辑器这是一个欢迎你的地方

react的useState的用法

热门推荐

楠姐的博客

09-21

3万+

useState

ECMAScript6语法使用

风吹云灭

10-27

2032

1.let的几种属性 +1.不能重复声明： let a = 10; let a = 20; //Identifier 'a' has already been declared +2.let块级作用域 for (let i = 0; i console.log(i); } console.log(i); //i is not defined(…) +3.let 没有变量提升

基于braft-editor富文本编辑器

weixin_40551414的博客

05-28

876

MyTextArea .js import 'braft-editor/dist/index.css' import React from 'react' import BraftEditor from 'braft-editor' /** * 基于braft-editor的富文本编辑器 * 调用时提供对象 * { * onchange (function) 改变方法 * hisC...

react中setState设置值失效

qq_41475630的博客

03-12

3603

react中setState设置值失效在学react小书, 练习时遇到问题: 有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（2s）以后就会停下来，也不叫了。完成 Dog组件，当用户点击的时候会执行自身的 bark 和 run 方法。给这个 Dog 组件加上状态 isRunning 和 isBarking，在进行相应的动作的时候设置为 true，停下来的时候设置为 f...

react动态增加state_React 中setState({key:value}) key值动态变化，如何动态设置key的值...

weixin_32085599的博客

02-04

390

第一种写法：import React, { Component } from 'react'class App extends Component {constructor(props) {super(props)this.state = {username: '',age: '',sex:''}}handleChange(field, e) {this.setState({[field]: e....

usestate函数式更新_React函数式组件值之useState()

weixin_42129113的博客

01-14

1853

react hooks 是 React 16.8 的新增特性。它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性，而不仅限于 class 组件。react hooks 的出现，标示着 react 中不会在存在无状态组件了，只有类组件和函数组件。状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。相比类组件，函数组件足够简单，要使函数组件具有状态管理，可...

react ustate声明得变量名如何变成动态

05-18

在 React 中，useState() 返回一个数组，第一个元素为当前状态的值，第二个元素为更新状态的函数。如果你想要动态地设置变量名，可以使用 ES6 中的解构赋值和计算属性名来实现。例如： ```jsx import React, { useState } from 'react'; function MyComponent() { const [state, setState] = useState({}); const [inputName, setInputName] = useState(''); const handleInputChange = (event) => { setInputName(event.target.value); }; const handleButtonClick = () => { setState({ ...state, [inputName]: 'some value', }); setInputName(''); }; return ( <div> <input type="text" value={inputName} onChange={handleInputChange} /> <button onClick={handleButtonClick}>Add key/value pair</button> <ul> {Object.entries(state).map(([key, value]) => ( <li key={key}> {key}: {value} </li> ))} </ul> </div> ); } ``` 在这个例子中，我们使用了一个输入框来动态设置键名，然后在点击按钮时将键值对添加到状态中。我们还使用了计算属性名来动态设置键名，这样我们就可以根据用户的输入来设置不同的状态键名。