问题标签 [controlled-component]

我在控制输入字段时遇到错误：“组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值......”当我尝试编写时输入字段中的某些内容，它会返回状态值，这是我的代码

这是几个输入字段中的两个，

//来自触发事件的输入的值在状态中得到更新但没有在浏览器中显示，我不太明白发生了什么，我一直在使用相同的方法来更新我的另一个项目中的状态

我创建了一个受控组件，将输入字段限制为仅 4 个数字。这些数字可以随时更改，任何时候数字是四位数我希望将结果传递给兄弟组件以执行操作。

我将值发送到父状态，然后重新渲染，兄弟姐妹获取值。但是我的组件也会重新渲染，并且输入字段会丢失值。

我是否应该将值发送给父级，让父级在每次输入更改时重新渲染？

还是使用上下文？

任何见解都会很棒，因为我是 React 新手。

因此，我在我的一个名为 Start 的组件中运行了一个非常标准的输入表单，该表单向 App 提供请求玩家姓名的地方。这使用 React 钩子来初始化一个状态，然后改变状态onChange。

出于某种奇怪的原因，每当我输入玩家名称字段时，React 都会认为我将其设置为未定义，并给我这个错误：

警告：组件正在将受控输入更改为不受控。这可能是由于值从定义变为未定义引起的，这不应该发生。

我通过检查 React Dev Tools 进一步验证了这一点。出于某种原因，每次我在框中输入任何内容时，它都会认为新值未定义，但它仍然显示设置为 {playerName}! 的正确字母。如果这有什么不同的话，这也在路由/交换机内。

任何想法是什么问题/修复是什么？

我正在尝试使用默认检查值呈现 mui Switch 组件。但它不起作用，我收到警告。

我也尝试过设置checked属性，onChange但它仍然不起作用！我无法弄清楚我在这里做错了什么。

我正在尝试找到一种更好的方法来一次处理我的所有调查数据。能够控制组件是一个好主意，但我不知道尝试以这种方式控制它们是否是一种好习惯，或者我只是以错误的方式接近它。

这就是我试图构建调查的方式。

这就是我尝试处理更改的方式：

如果有任何想法可以正确定位，我将非常感谢任何提示。谢谢你。

在我的 React 组件中，我使用了输入类型；但不知何故，它无论如何都不会编辑。

我也检查了这篇文章，但无法追踪解决方案。

我在上面的代码中做了什么？

是否可以在用户编辑 React Bootstrap <Form.Control>后更新它的值？

我在 React 中创建了一个带有四个受控字段的小型 Bootstrap 表单。详情如下。提交工作，但我想要一种以编程方式更新各个字段的值的方法，既可以重置表单，也可以填写一组常见的默认值。

• 我的代码（其中各种按钮调用setFormContents）一直有效，直到字段被更新。在此之后，更新传递defaultValue给<Form.Control>. 这是有道理的，但我不确定首选的方法是什么。
• 变量formContents和setFormContents与 的父元素分类<MyForm>。

细节

表单的状态和相关的更新功能通过以下方式提供props

我有这个表单组件，您可以在单击按钮时添加一些字段。这意味着我在现有组件中添加了一个组件。

想法是用户可以添加他们想要的任何字段集，然后提交并创建一个充满训练对象的一天的模板。需要控制输入，因为当表单使用新字段重新呈现时，以前键入的值必须保持不变。

但这里的问题是，当我键入每个字符时，输入会被渲染并且失去焦点。所以我需要再次选择并输入。帮助？

你可以在这里查看：它在前端的外观

这是完整组件的代码：

我正在控制反应表单上的单选按钮。

状态按预期更新更改，但checked值不会在更改时重新呈现。因此，从用户的角度来看，该按钮不起作用。

我在这里的代码盒中复制了这个https://codesandbox.io/s/eager-hertz-stzgk?file=/src/App.js

相关代码：

感谢任何帮助，因为我没有想法。

谢谢