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

Question

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

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

但 material-ui 文本字段未设置为脏，因此标签位于值的正上方。

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

我对 React 还很陌生，这似乎我只是不太明白应该如何在 React 中完成，任何帮助将不胜感激。

Answer 1

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

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

或者你可以这样做：

<InputLabel shrink>Count</InputLabel>

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