首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-javascript :我的react输入不起作用。一旦我设置了值,它就变得不可变了

React是一个用于构建用户界面的JavaScript库,它采用了组件化的开发模式。在React中,通过使用状态(state)来管理组件的数据,并通过props将数据传递给子组件。

对于你提到的问题,"我的React输入不起作用。一旦我设置了值,它就变得不可变了",可能有以下几个原因和解决方法:

  1. 状态不可变性(Immutability):在React中,状态是不可变的,即不能直接修改状态的值。如果你想修改状态的值,应该使用setState方法来更新状态。例如:
代码语言:txt
复制
this.setState({ inputValue: '新的值' });
  1. 受控组件(Controlled Component):如果你的输入框的值是通过props传递给组件的,那么你需要在父组件中更新props的值,然后再将新的值传递给子组件。这样可以保证输入框的值始终与props中的值保持一致。
  2. 事件处理:如果你的输入框是一个可编辑的输入框,你需要为其绑定onChange事件,并在事件处理函数中更新状态的值。例如:
代码语言:txt
复制
handleChange(event) {
  this.setState({ inputValue: event.target.value });
}

render() {
  return (
    <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
  );
}
  1. 组件重新渲染:当状态发生变化时,React会重新渲染组件。如果你发现输入框的值在设置后立即变为不可变,可能是因为组件重新渲染导致输入框的值被重置。你可以通过在组件的构造函数中初始化状态,或者使用生命周期方法(如componentDidMount)来避免这种情况。

总结起来,要解决React输入不起作用的问题,你可以检查以下几个方面:确保状态的更新使用setState方法,检查是否使用了受控组件,正确处理输入框的事件,以及避免组件重新渲染导致的值重置问题。

关于React的更多信息和学习资源,你可以参考腾讯云的React产品介绍页面:React产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 作为 UI 运行时来使用

宿主树是相对稳定,大多数情况更新并不会从根本上改变其整体结构。如果应用程序每秒都会将其所有可交互元素重新排列为完全不同组合,那将会变得难以使用。那个按钮去哪?为什么屏幕在跳舞?...在宿主树级别上不可变性使得多线程变得更加容易。...它就像 “updater” 升级模式在这里你可以给每一次更新命名: ? action 字段可以是任意,尽管对象是常用选择。...一旦 c 函数执行完毕,它调用栈帧就消失!因为它不再被需要了。我们返回到函数 b 中。当我们结束函数 a 执行时,调用栈就被清空。...这些 Hooks 规则能够被 linter plugin 所规范。有很多关于这种设计选择激烈争论,但在实践中并没有看到它让人困惑。还写了关于为什么通常提出替代方案不起作用文章。

2.5K40

社招前端二面react面试题集锦

受控组件、非受控组件受控组件就是改变受控于数据变化,数据变了页面也变了。受控组件更合适,数据驱动是react核心非受控组件不是通过数据控制页面内容说说 React组件开发中关于作用域常见问题。...在 React diff 算法中,React 会借助元素 Key 来判断该元素是新近创建还是被移动而来元素,从而减少不必要元素重新渲染。...同时,React 还需要借助 key 来判断元素与本地状态关联关系。现在有一个button,要用react在上面绑定点击事件,要怎么做?...class Demo { render() { return { alert('点击按钮') }}> 按钮 <...:通过设置两个属性propTypes和defaultProps(3)状态区别React.createClass:通过getInitialState()方法返回一个包含初始对象React.Component

2K60

成为一名高级 React 需要具备哪些习惯,他们都习以为常

在这个虚构例子中,你可以简单地向Todo类型添加一个完整布尔,这样就不再需要completedTodos数组。...当状态更新很简单时,useState是非常好。例如,可以用 usestate跟踪复选框是否被选中,或者跟踪文本输入。 话虽如此,当状态更新变得稍微复杂时,您应该使用一个reducer。...一旦你在依赖项数组中列出了每个依赖项,你可能会发现你效果运行得太频繁。例如,该效果可能在每个渲染中运行,并导致无限更新循环。...一旦你掌握流畅语言,你就能像现在写JavaScript一样快地写TypeScript。...虽然像Next.js这样框架使SSR变得更容易,但仍然不可避免地存在必须处理复杂性。如果您需要使用SSR进行SEO或在移动设备上快速加载,那么请务必使用它。

4.7K40

Next.js 越来越难用了

第二个原因或许显得有些滑稽默,但对而言,它确实表明了 Next.js:提供更优秀 React 默认设置。 这正是所追求。直到后来,才发现 Next.js 还有更多功能。...至于 getServerSideProps,尽管它有些特别,但一旦你掌握获取 request 和响应格式方法,就会发现它也相当容易上手。...而在处理 cookies 时,你可以在 React 渲染上下文中读取 cookies,但只能在变更上下文中(如服务器操作和路由处理程序)设置 cookies,因为一旦开始流式传输,就无法再设置 cookies...尤其作为一个长时间投入于编写并帮助他人编写 B2B SaaS 应用程序的人,认为使用 App Router 开发体验远不如 Pages Router。 随着框架发展, 这是不可避免吗?...与其将其视为 React 推荐默认选项,不如将其视为一个 beta 版本。它体验相对复杂,一些原本简单事情现在变得困难 / 不可能,但这正是“前沿”技术所预期情况。

10510

写给前端同学终端修炼手册

我们可以参考此篇文章 - 如何在 Windows 10 上安装和使用 Zsh[4] 一旦设置完成,我们就可以配置终端应用程序使用 Bash 或 Zsh。...如果 ctrl + c 因某种原因不起作用,ctrl + d 可能会起作用。 最后,如果所有方法都失败,你可以关闭当前标签页/窗口。快捷键取决于操作系统和终端应用程序。...这是一个长时间运行过程,因此 ctrl + L 快捷键不起作用。此时我们可以使用⌘ + k来执行清屏工作 别名 有时我们会反复输入相同命令。...例如,我们可以设置一个别名,这样每当输入 hi 时,它会自动运行 echo "Front789!": alias hi='echo "Front789!"'...一旦完成,第二个命令会自动运行。 一旦掌握链接技巧,我们就开始到处使用它。

11110

React 入门学习(十三)-- antd 组件库基本使用

大家好,是小丞同学,一名大二前端爱好者 这篇文章是学习 ReactReact antd组件库学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 引言...在我们学习JavaScript 时候,我们学习一个 bootstrap 组件库。...可以让我们快速开发,但是我们现在学习 React ,一种组件化编程方式,很少说会去贴大量 HTML 代码,再配一下 CSS,JS。...我们也有一些现成组件库可以使用,我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分快速,方便和整洁。...,这种方法需要去暴露 React配置文件,这种操作是不可返回一旦暴露就不可回收。

1.6K10

React 入门学习(十三)-- antd 组件库基本使用

大家好,是小丞同学,一名大二前端爱好者 这篇文章是学习 ReactReact antd组件库学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 引言...在我们学习JavaScript 时候,我们学习一个 bootstrap 组件库。...可以让我们快速开发,但是我们现在学习 React ,一种组件化编程方式,很少说会去贴大量 HTML 代码,再配一下 CSS,JS。...我们也有一些现成组件库可以使用,我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分快速,方便和整洁。...,这种方法需要去暴露 React配置文件,这种操作是不可返回一旦暴露就不可回收。

1.8K30

React 并发 API 实战,这几个例子看懂你就明白

从现在起,也将使用“高优先级更新”和“低优先级更新”来指代它们。 为了保持向后兼容性,默认情况下,React 18 行为和之前版本一样,所有更新都是高优先级,因此不可中断。...所以要小心,用React.memo包裹“昂贵”组件。 我们还有另一个新 hook 是useDeferredValue。如果相同状态在关键和重型组件中都使用,它就变得有用了。就像我们上面的例子一样。...但在随后高优先级渲染中,React 总是返回存储。但它也会比较你传递和存储,如果它们不同,React 会安排一个低优先级更新。...如果在低优先级等待更新时,高优先级这时更新再次变化,React 会丢弃它,并安排一个带有最新低优先级更新。...怀疑一旦数据获取 Suspense 达到生产就绪状态,它就会更受欢迎。但现在,你还有时间学习并逐渐将其采用到你应用中。

12810

翻译 | Thingking in Redux(如果你只了解MVC)

一旦你开始学习React-Natvie(或React),在有人向你提及Redux之前,你大概只落后3个stack overflow问题,或者medium.com上几篇博客距离。 你当然很高兴。...model改变了一些,并将返还给controller,然后controller刷新view。灰常简单! Redux数据流。人生变得糟透了。 在Redux中事情有些不同。...用户每输入一个字符,都会带着input中新value去调用这个action。.../actions.js'; /** 初始状态被用来定义你reducer。 通常你将会把它设置为默认和空字符串。需要这么做理由是,当要使用这些时候,你至少保证它们有一个默认。...虽然你仍然需要做一些基础模版设置填充,但是希望这解释清楚了如何以redux方式进行思考。 有些问题曾经让掉到坑里一段时间(比如:信息传到了哪?

1.3K100

别再说虚拟 DOM 快了,要被打脸

如果你觉得虚拟 DOM 很快,那么这篇文章可能就是你所缺少 经常听到有人在群里,或者在社区里说一个很严重错误,那就是说 React Virtual Dom 是以快出名,比原生 DOM 快多了...虽然同意虚拟 DOM 为我们提供很多便利,但我将解释为什么认为根据定义,更快渲染和更快更新是不正确。要付出代价,其利益并不是大多数人想象或至少希望。 要阅读本文,您需要熟悉DOM。...虚拟DOM比精心设计手动更新慢。 为什么有些开发人员认为Virtual DOM更快 在虚拟DOM(尤其是React早期,传播一个神话,即虚拟 DOM 使 DOM 快速更新。...很多人都没有意识到,在一个大型列表所有数据都变了情况下,重置 innerHTML 其实是一个还算合理操作… 真正问题是在 “全部重新渲染” 思维模式下,即使只有一行数据变了,它也需要重置整个 innerHTML...然而,有一些基准可以将它与其他技术进行比较,例如 Aerotwist React +性能文章,它描绘虚拟 DOM 在宏观方案中所处位置更真实画面。 我们得到了什么?这值得么?

1.9K30

ReactJs和React Native那些事

4,React基于组件(component)开发,然后组件和组件之间通过props传递方法,每个组件都有一个状态(state),当某个方法改变了这个状态时,整个组件就会重绘,从而达到刷新。...另外,说到重绘就要提到虚拟dom,就是用js模拟dom结构,等整个组件dom更新完毕,才渲染到页面,简单来说只更新相比之前改变了部分,而不是全部刷新,所以效率很高。...**这问题变得更加严重时候是在2007年。在罗德岛州普罗维登斯商业创新工厂会议上发表讲话,理查德·沃曼也是。在演讲之后理查德上来介绍自己并且还称赞演讲。他真的是很有雅量。...反驳他所讲。当他在台上发表自己观点时,正忙着记录不同意观点。当有机会跟他说话时,很快就反驳他一些观点。看起来一定像个混蛋。  **他回答改变了的人生。这是一个简单事情。...**你看,认为他比任何人都明白当一个观点最终如此有力时,他们也就开始变得脆弱,很难形成一个思想,很容易被错过,很容易妥协,很容易被挤扁。那是很深奥。观点很脆弱。他们通常一开始就很无力。

1.9K100

Hooks 邂逅 MobX ,代码变得更丝滑了!

其实吧,Mobx 作为当下炙手可热状态管理库,很早就推出了 v6 版本,紧跟技术潮流,极大方便了我们在 Hooks 环境下,更好React 进行状态管理。想这也是它炙手可热原因之一吧!...不可否认,Hooks很强大,而且认为,尤大大 Vue3 很大程度上也参考 React Hooks 实现,虽然两者实现存在差异,但是思想是可以借鉴。...(仅代表个人观点,望各位大佬不想吐槽) 但是呢,在实际开发过程中,纯粹使用Hooks 的话,还是会遇到一些问题: 依赖传染性 —— 这导致开发复杂性提高、可维护性降低 缓存雪崩 —— 这导致运行性能降低...有时候,你useEffect 依赖某个函数不可变性,这个函数不可变性又依赖于另一个函数不可变性,这样便形成了一条依赖链。...一旦这条依赖链某个节点意外地被改变了,你 useEffect 就被意外地触发了。 是不是感觉比 传统React.Component 更伤脑细胞? 为什么说是缓存雪崩呢?

1.2K10

通过 React Hooks 声明式地使用 setInterval

CodeSandbox 线上示例) 实现 useInterval Hook 设置一个计时器,并且在组件 unmount 时候清理掉了。...说好“纯粹 JavaScript”呢?React Hooks 打了 React 哲学脸? 哈,一开始也是这么想,但是后来改观,现在,准备也改变你想法。...将通过一个实际例子来说明这个问题: --- 如果我们希望 interval 间隔是可调: [一个延时可输入计时器] 此时无需手动控制延时,直接动态调整 Hooks 参数就行了。...,它就会重新设置计时器。...相对应,setInterval 却没有描述到整个过程 - 一旦设置计时器,它就无法改变了,只能清除它。 这就是 React 模型和 setInterval API 之间“阻抗不匹配”。

7.5K220

自己手写一个redux,

在我们使用 React 时候,常常会遇到组件深层次嵌套且需要传递情况,如果使用 props 进行传递,显然是非常痛苦。...为了解决这个问题,React 为我们提供原生 context API,但我们用最多解决方案却是使用 React-redux 这个基于 context API 封装库。...‘是头部’,在 body 中出现绿色字体是body’。...这样就存在一个严重问题,因为 state 是全局共用一旦在一个地方改变了 state ,那么,所有用到这个组件都将受到影响,而且这个改变是不可预期,显然给我们代码调试增加了难度系数,这样结果是我们不愿意看到...二、dispatch现在看来,在我们面前出现一个矛盾:我们需要数据共享,但共享数据被任意修改又会造成不可预期问题!

54530

自己手写一个redux

在我们使用 React 时候,常常会遇到组件深层次嵌套且需要传递情况,如果使用 props 进行传递,显然是非常痛苦。...为了解决这个问题,React 为我们提供原生 context API,但我们用最多解决方案却是使用 React-redux 这个基于 context API 封装库。...‘是头部’,在 body 中出现绿色字体是body’。...这样就存在一个严重问题,因为 state 是全局共用一旦在一个地方改变了 state ,那么,所有用到这个组件都将受到影响,而且这个改变是不可预期,显然给我们代码调试增加了难度系数,这样结果是我们不愿意看到...二、dispatch现在看来,在我们面前出现一个矛盾:我们需要数据共享,但共享数据被任意修改又会造成不可预期问题!

43320

Solid.js 就是理想中 React

由于我们为计数设置器使用了回调函数,因此永远不会在 count 变量上有陈旧闭包。 这是一个人为做出来例子,但除非你已经使用 React 一段时间,否则它仍然很令人困惑。...我们中有许多人每天都会遇到更复杂情况,即使是最有经验 React 开发人员也会为之头痛不已。 假响应性 思考很多关于 hooks 事情,想知道为什么它们感觉不太对劲。...每次组件渲染时不会设置间隔吗? 没有。它就这么正常运行了。 但为什么会这样?好吧,事实证明 Solid 不需要重新运行 Counter 函数来重渲染新计数。...于是在 Solid 中解决 React useEffect hook 问题,而无需编写看起来像 hooks 东西。我们可以扩展我们计数器例子来探索 Solid 效果。...话虽如此,也开始注意到 React hooks 代码经常变得容易出错。感觉 Solid.js 使用了 React 许多符合人体工程学部分,同时最大程度减少了混乱和错误。

1.8K50

Vue 选手转 React 常犯 10 个错误,你犯过几个?

这是因为 0 在 JavaScript 中是一个假,&& 操作符短路,整个表达式被解析为 0。...它就等价于: function App() { return ( {0} ); } 与其他假(''、null、false 等)不同,数字...但是,它并不起作用!当我们输入一个项目并提交表单时,该项目没有被添加到购物清单中。 问题就在于我们违反了也许是 React 中最核心原则 —— 不可变状态。...我们需要将我们状态初始化为一个空字符串: const [email, setEmail] = React.useState(''); 当我们设置 value 属性时,等于就是告诉 React,我们希望这是一个受控组件...不过,这只有在我们传递给它一个定义好时才会起作用!通过将 email 初始化为一个空字符串,确保该永远不会被设置为 undefined。

20010

React基础(6)-React中组件数据-state

bug)] 直接修改this.state,虽然改变了组件内部状态,但是并没有驱动组件进行重新渲染,既然组件没有重新渲染,页面上UI这个this.state当然不会有任何变化 但是ReactsetState...prevState.isStatus   }));   this.setState({     desc: "学习React",   }); } } // 给props设置一个默认初始,外部组件若不传任何...,如果想要修改某些,用来响应用户输入或者输出响应,可以借用React内提供setState函数进行触发,并用state来作为替代 state是当前组件内部状态,它作用范围只局限于当前组件,它是当前组件一个私有变量...,可以通过setState函数修改state 结语 本文主要讲述React组件中数据属性-state,它是组件内部状态,是一私有的变量,用于记录组件内部状态,由于props不可修改,通过React...,觉得至今也在摸索..

6K00

教你如何在 React 中逃离闭包陷阱 ...

我们知道,React.memo 封装组件上每个 props 都必须是原始,或者在重新渲染时是保持不变。否则,memoization 就是不起作用。...但是我们又遇到了新问题:如果在输入框中输入内容,然后按下按钮,我们在 onClick 中打印是 undefined 。...但它不可能是 undefined,如果在 onClick 之外添加 console.log,它就会正确打印。...过期闭包问题 但是,以上所有的内容,如果你之前没有接触过闭包的话会觉得挺新奇,但其实还是挺简单,你多创建几个函数,就会变得很自然。...我们在 onClick 中从未更新过,你能告诉为什么吗? 当然,这又是一个过期闭包。当我们创建 onClick 时,首先使用默认状态(undefined)形成闭包。

52140

TS_React:Hook类型化

大家好,是「柒八九」。 在前几天,我们开辟--「TypeScript实战系列」,主要讲TS在React应用实战。 大家如果对React了解/熟悉的话,想必都听过Hook。...在当下React开发中,函数组件大行其道。而Hook就是为了给「函数组件添加内部状态还有处理副作用」。换句话说,Hook已经在现在React开发中, 变得不可替代。...这种情况经常发生在ReactuseState 「默认」中。比方说,name 初始是null。...这显然是错误:我们以后会想把 name 设置成一个字符串。 此时你必须告诉 TypeScript,它可以是别的类型。...❝这里要提到一件事是,「当类型推断不起作用时,应该依靠泛型参数而不是类型断言」。

2.4K30
领券