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

Posted 2023-03-16

【中文标题】将 Formik 与 React 和 material-ui 的 TextField 一起使用

【英文标题】：Using Formik with React and material-ui's TextField

【发布时间】：2021-01-14 06:26:55

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

<TextField InputLabelProps= shrink: true  />

或者你可以这样做：

<InputLabel shrink>Count</InputLabel>

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