问题标签 [react-state]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1995 浏览

javascript - 选中/取消选中复选框时管理状态 - 反应

在我的反应应用程序中,用户输入关键字并获得结果列表。我正在尝试对这些结果实施过滤器。下面是过滤器的截图。 在此处输入图像描述

这是我的状态

我要做的是,每当检查复选框或未选中复选框时,我都将相应的复选框设置为True/False。基于每个复选框的这个布尔值,我过滤掉results然后在 UI 上呈现它。单击复选框时,我可以过滤结果,但未选中复选框时,我无法显示所有结果。这就是我在复选框更改时的处理方式。

我知道我没有正确处理状态,在这种情况下我该怎么办。为了更好地参考,这里是完整的搜索结果代码。

0 投票
3 回答
43 浏览

reactjs - 将函数传递给子组件的奇怪结果

所以我在理解我对传递给子组件的道具进行函数调用的方式的差异时遇到了问题。

对比

第一个按预期工作,并在单击时为我提供组件状态的 id。加载后的第二个会在我有机会点击它们之前打印每个组件的所有 id。我错过了什么?onClick 就是 onClick,为什么那个 return 语句如此重要。谢谢您的帮助。

0 投票
3 回答
1996 浏览

reactjs - 为多级状态对象反应 setState

我正在尝试更新包含多个级别的状态对象。请参阅此示例https://codesandbox.io/s/oq9kp9vy5y

问题是,渲染方法中的值不会更新......只有第一个。我可以强制更新还是有更好的方法?

谢谢卡斯帕

0 投票
2 回答
3193 浏览

javascript - 输入 onChange 和 React 逻辑

我是 javascript 爱好者,但我是 React 新手。我在理解 React 逻辑时遇到了一些麻烦,所以我做了一个简单的例子,一个带有数字输入的应用程序和一个取消最后一个操作的取消按钮:

一切正常,但假设用户输入数字 200(通过键入),然后想要撤消此值并检索最后一个值,它将回退到 20,因为每个键盘条目都会使用输入值刷新状态......

为了避免这种行为,我尝试将输入移动到自定义组件中,为其添加本地状态并根据组件道具呈现输入值。我在本地添加了一个 onChange 事件,根据用户“实时”输入设置组件状态,并将 onBlur 事件绑定到父回调,该回调将自己的状态设置为“完成”用户输入。

该组件最初呈现良好,在您输入时呈现良好,但在通过取消按钮从外部更改时不会更新......

0 投票
1 回答
135 浏览

css - 更改在 React 中多次声明的一个组件的状态 - 更好的实践?

首先,这段代码对我有用,但我想知道是否有任何问题。

我尝试改变一个被多次调用的组件的状态,这比我在 React 中意识到的要困难。我能够完成它,但我觉得我在 toggleClass 中做了一些不好的练习。如果这是一种很好的做法,但有更好的方法可以做到这一点,或者如果没有任何问题,这个菜鸟很想知道。

ButtonContainer.js

按钮.js

CSS


--更新--

改进的切换类

0 投票
1 回答
671 浏览

reactjs - Reactjs在拼接状态后不更新dom类

您好,我是新来的,对更改类和动画 onClick 有疑问。

我试图仅使用我添加或删除到我的类名中的数组的 css 类来上下移动。

app.js 我有这个状态

这是我在 app.js 中渲染组件的方式

我的组件看起来像这样

这就是 div 向上移动的方式

这就是我试图将其向下移动的方式

我很确定我不应该直接更改状态,而且当我更改它以删除“位置顶部”类时,dom 不会重新加载。

感谢您提前提供的所有帮助,如果我没有展示您需要的东西,请写信。

0 投票
1 回答
50 浏览

reactjs - 反应动态状态变化没有醒来

假设我有如下状态:

然后我有一个如下按钮:

创建用户如下:

因此,当我单击按钮时,我想关闭以数据关闭按钮格式定义的引导模式,因为我在 createUser 中将其指定为模式。

但它仅在第二次单击保存按钮时有效。为什么?

另外,如何更改为单击本身?

0 投票
0 回答
887 浏览

reactjs - 为什么比较当前道具与具有相同值的 nextProps 会返回 false?

我有一个组件总是接收相同的道具。当我在shouldComponentUpdate()生命周期中比较它们时,它返回 false

但是,如果我比较具有相同值的当前状态和先前状态,它们工作正常并返回 true

state 和 props 都是对象(引用类型),但为什么它们的行为不同?

0 投票
2 回答
599 浏览

javascript - 在 React JS 中使用多个组件从父级传递和更新 prop / state 值

我有两个组件,一个组件中有多个选项的选择列表,另一个组件中有一个按钮。

我希望在 UI 中您可以从选择列表中选择任何选项,还可以单击按钮将选择列表重置为“选择”。

这两个组件都在渲染的父组件内 - 我试图将父组件保持为“单一事实来源”,以便选择列表可以在选择时更新其值,然后重置按钮也可以更新它相同的值。

我已经写了我认为这应该如何工作,但是选择列表卡在第一个项目上,并且重置按钮没有更新列表,无法发现我哪里出错了,如果有人可以给我一些建议/为我指明正确的方向,我将不胜感激 - 谢谢

0 投票
2 回答
340 浏览

javascript - 无法更新道具或状态更改的组件

我希望浏览器显示EditMessage组件 (in Dashboard.js) 如果showEdit为真(见initStatein MessageReducer.js)和CreateMessage组件 ifshowEdit为假但我的代码不起作用。我的应用程序没有注意到Dashboard.js.

我尝试在其中包含this.setState方法,Dashboard.js但出现错误:“超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况”。我还尝试将 的值showTypeForm直接分配给 props 并输出(请参阅 中的注释Dashboard.js),但这种方法也不起作用。我不确定要使用哪种生命周期方法。

我的代码看起来像这样。MessageSummary.js:

MessageActions.js:

RootReducer.js:

MessageReducer.js:

仪表板.js: