问题标签 [controlled-component]

我正在通过@open-wc使用lit-elements，目前正在尝试编写一组嵌套的组件，其中内部组件是输入字段，并且某些祖先组件必须支持一些任意重写规则，例如“不允许输入数字” '。

我想弄清楚的是使用 lit-elements 构建它的正确方法是什么。在React中，我将使用“受控组件”，请参见此处轻松强制所有组件提交到根组件属性。

下面的示例是我使用 Lit-Elements 提出的。有更好的方法吗？

请注意; 因为我想忽略一些角色，所以挑战变得稍微困难​​了。如果没有e.target.value = this.value;at level-5，输入元素将与忽略字符上的组件状态不同。我希望整个组件链正确同步，因此要举例说明标题标签。

稍后添加

另一种方法是在事件中使用路径数组直接从根组件访问输入元素。

我认为这是一个更糟糕的解决方案，因为它导致组件之间的耦合更强，即假设子组件是具有 value 属性的输入元素。

我阅读了有关此问题的答案，但没有一个与我的设置相似：

什么是受控组件和非受控组件？

我有一个父组件和许多子组件作为输入。每个输入都有一个defaultValue使用从父级接收到的道具设置的，并且输入的验证在 上执行onBlur。这是因为验证是异步的，所以onChange会像疯了一样减慢应用程序的速度。

这个编排是怎么命名的？“受控”的传统定义似乎是在每个 上更新的输入onChange，而“不受控”输入是管理其自己的内部状态的输入，该状态随后通过 ref 访问。我的设置似乎两者都达不到，坐在中间的某个地方——或者不是？

更新：这是一个CodeSandbox。

我有一个很长的文本区域，有 100-200 行。它们对应redux state phrases = [{id, text, ...}]，textarea的每一行都是一个phrase[id].text。

当我更改 textarea 时，它会调度 redux state 的更改phrases。

当我从第一行更改一个字母时，页面滚动到结尾，光标转到第 200 行。但我希望页面的光标和滚动位置不会改变。

我尝试使用 event.target.selectionStart，selectionEnd，但即使光标返回其位置，页面滚动到屏幕结束。

如何解决？

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件（NavBar 和 Carousel 的父组件）中的 click 方法，它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下链接后移动幻灯片的线索为零。当我最初设置了 activeIndex 时，我无法让它正确地监听作为道具传递的索引，并且 onSelect 处理程序也基本上什么都不做。

更新：主页 => 只是在状态中添加了方向，以在下面的轮播中反映更新 v2 的变化。

导航栏

更新 V1：Carousel => 这个版本只是有条件地放置“活动”类名，但这会杀死 CSS 动画，因为条件不添加它们。当您通过指示器或箭头正常控制它时，我不确定如何临时添加它们或将转换置于 react bootstrap 的方式中。

更新 V2：Carousel => 此版本尝试使用受控轮播的文档版本，但我不确定方向和 onSelect 应该放什么。动画也搞砸了——由于某种原因，carousel-item-left（或右）被应用了两次，然后上一张或下一张幻灯片没有添加任何 className 以使动画正确滑开（而不是完全消失）我有一个 CSS 文件，可以将旋转木马的动画更改为垂直，但我不确定此时该做什么。我也不知道如何处理 onSelect 部分。

轮播的 CSS：

我试图通过受控组件获取日期作为用户输入，但总是遇到此错误“TypeError：无法读取未定义的属性'名称'”。这是导致错误的一段代码。我正在使用该react-datepicker模块来获取日期输入，因为当我尝试使用 HTML 输入时，type="date"我无法禁用以前的日期。

我有一个受控输入，在我输入时不应更新。我已将组件剥离为基本组件<input/>以减轻任何副作用，但它仍然允许我编辑值。

我希望Hello即使在尝试输入输入时该值也始终不变，但事实并非如此。当我有其他更改状态的组件时，输入将重置回Hello，但仅在另一个状态更改触发渲染之后。有什么想法可以在这里发生吗？我会包含一个 Codepen，但代码在我的 Next.js 应用程序之外的其他地方按预期工作（不允许更改文本）

我正在使用 moviedb api 实现电影搜索功能。我只在 React 中实现，但我想在 Redux 中实现。这是我在 React 中的方法。

页眉.js

我想用 Redux 来做，所以我是这样做的。

页眉.js

动作/index.js

减速器/movieSearchReducer.js

我不确定如何在 Redux 中实现以下输入表单部分。如果可以的话请帮忙。

我正在构建一个受控组件（一个组件是父组件，另一个是子组件）。父组件是 SurveyContainer，子组件是 SurveyPage1。在 SurveyContainer 中，我有一个模型对象surveyModel 和嵌套对象surveyModel.topPreferencesObj，我想在SurveyPage1 中对其进行初始化。所以我将这个对象作为道具传递。

这是调查页面 1。在这里，我收到属性对象。另外在这里，我有一块手表，每次发生变化时都会触发。因此，当它触发时，我想发出，以便父组件知道该属性已更新。但是在 watch 函数中我得到TypeError: Cannot read property 'handle-change' of undefined 我是 vuejs 的新手，我现在真的很着急。我在互联网上搜索，它看起来应该可以工作，但它没有。

谢谢。

我有一个受控的 React 输入组件，我正在格式化输入，如 onChange 代码中所示。

然后我的 formatPhone 函数是这样的

}

当我尝试在中间某处删除/添加一个数字然后光标立即移动到字符串的末尾时，我开始面临这个问题。

我在Sophie的解决方案中看到了一个解决方案，但我认为这不适用于这里，因为 setState 无论如何都会导致渲染。我还尝试通过 setSelectionRange(start, end) 来操纵插入符号的位置，但这也无济于事。我认为导致渲染的 setState 使组件将编辑的值视为最终值并导致光标移动到末尾。

谁能帮我弄清楚如何解决这个问题？

我正在onChange对输入事件发送一个 redux 操作，以添加到 Redux 状态上的一些“答案”数组。
一切正常，Redux 存储更新，但问题是在设置input值以反映 Redux 存储中的更改时，它在控制台中给我一个错误，说...

Warning: A component is changing an uncontrolled input of type number to be controlled.

这是一个代码框来演示这个问题......

https://codesandbox.io/s/controlled-input-issue-p2k74

我怎样才能input控制它，但通过 Redux 存储，而不是本地状态？