将Formik与React和material-ui的TextField一起使用

问题描述

是否可能有一个表单，其值会随着组件属性的变化而变化？

我有一个带有两个子组件的父组件，随着子1中的某些变化，我希望它向其同级发送更新并更新表单值。我在React和material-ui中使用了formik。我能够将数据发送到同级组件，但是在管理表单状态时遇到问题。我将表单的初始值设置为props.data ['fieldName']，并且该部分正在工作。

但是material-ui文本字段未设置为dirty，因此标签位于值的顶部。

当我尝试更新值时，不允许我更改它。

我对React还是很陌生，似乎我只是不太了解应如何在React中完成它，对您的帮助将不胜感激。

解决方法

如果您使用的是TextField，则可以执行以下解决方法：

<TextField InputLabelProps={{ shrink: true }} />

或者您可以这样做：

<InputLabel shrink>Count</InputLabel>

来源：https://material-ui.com/components/text-fields/