已解決430363個問題，去搜搜看，總會有你想問的

將“標簽”道具傳遞到 Formik <字段 />與材料 UI 一起使用時<文本字段 />

首頁猿問將“標簽”...

將“標簽”道具傳遞到 Formik <字段 />與材料 UI 一起使用時<文本字段 />

JavaScript

楊__羊羊 2022-09-29 15:44:31

我正在使用 Formik 和材質 UI 構建一個窗體。我通過以下方式利用 Formik 組件：我的輸入組件：const Input = ({ field, form: { errors } }) => { const errorMessage = getIn(errors, field.name); return <TextField {...field} />;};向下到我的渲染形式，這是我是如何做到的：<Field component={Input} name={`patients[${index}].firstName`}/>問題在于材質 UI 使用標簽屬性在輸入字段上顯示標簽，因此標簽應該是傳遞給的 prop。如果我將它“硬編碼”到我的“輸入”組件中，它就會起作用，這違背了使用可重用合成的目的。所以這有效但不方便：const Input = ({ field, form: { errors } }) => { console.log(field.label); const errorMessage = getIn(errors, field.name); return <TextField {...field} label="first name" />;};我希望的是使用它上面的一個級別，例如：<Field component={Input} name={`patients[${index}].firstName`} label="first name"/>但以上內容不起作用，因為“標簽”沒有被Formik識別為道具（或者這就是我對它的理解，但我可能是錯的）。有沒有人遇到過這個問題？我知道我可以使用我的“姓名”值作為標簽，但這并不是很好的用戶體驗，因為它會給我留下一個標簽，如“患者[0]名字”啊哈

查看完整描述

2 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

這是一個很好的解決方案，本質上是你的，但你可以提供任何東西，而不僅僅是標簽。創建字段并將標簽放在類似內容上，以便：

訣竅是使用點差運算符，然后自定義組件變為：

import React from 'react';

import { TextField } from "@material-ui/core"

import { get } from "lodash"

export const MuiTextFieldFormik = ({ field, form: { touched, errors }, ...props }) => {

const error = get(touched, field.name) && !!get(errors, field.name)

const helperText = get(touched, field.name) && get(errors, field.name)

return (

)

}

令人失望的是，他們的文檔沒有這么簡單的例子

反對回復 2022-09-29

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

好吧，所以我想我找到了解決方案。我破壞參數的方式是，我只是傳遞字段和表單，這些字段和表單保存了大部分數據，因此以這種方式傳遞標簽道具可以修復：

const Input = ({ field, label, form: { errors } }) => {

const errorMessage = getIn(errors, field.name);

return <TextField {...field} label={label} />;

};

然后，當我以這種方式使用 Formik 組件時，正確的標簽被傳遞：

<Field

label="first name"

component={Input}

name={`patients[${index}].firstName`}

反對回復 2022-09-29

2 回答
0 關注
109 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將“標簽”道具傳遞到 Formik <字段 />與材料 UI 一起使用時<文本字段 />

將“標簽”道具傳遞到 Formik <字段 />與材料 UI 一起使用時<文本字段 />

2 回答

添加回答