Formik MaterialUI输入掩码
Formik MaterialUI输入掩码
提问于 2020-09-17 17:03:41
我有一个formik格式的表单，字段通常如下所示：
<Field
component={TextField}
name="phoneNumber"
type="text"
required
label={t('containers:CommonFields.phoneNumber')}
variant="outlined"
margin="normal"
/>其中字段是从Formik导入的，而TextField只是样式为formik-material-ui textfield：
import { TextField } from 'formik-material-ui';
import breakpoints from 'styles/breakpoints';
import styled from 'styled-components/macro';
export default styled(TextField)`
${breakpoints.md`
max-width: 320px;
`};
width: 100%;
`;我想做的是使用react-input-mask将输入掩码添加到该字段。这是我到目前为止所得到的：
https://codesandbox.io/s/priceless-currying-hryv1
不幸的是，输入没有呈现
回答 3
Stack Overflow用户
发布于 2020-09-17 17:45:23
Stack Overflow用户
发布于 2020-09-25 18:46:09
您需要在FormikTextField组件中更改一些内容。
- 您不需要本地状态，您的输入应由Formik控制。
- 您需要将Formik字段发送其子级的道具传递到InputMask中。
- 您需要将输入道具传递给InputMask内部的子级。
最后，工作组件应该看起来像这样
const FormikTextField = (props) => {
return (
<InputMask
{...props}
{...props.field}
mask="(0)999 999 99 99"
disabled={false}
maskChar=" "
>
{(inputProps) => <StyledTextField {...inputProps} />}
</InputMask>
);
};Stack Overflow用户
发布于 2020-09-28 22:36:41
请看一下working version。我认为我们需要使用formik提供的useField钩子，并在formik表单中直接使用组件，而不是作为组件属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63934723
复制相关文章
相似问题
腾讯云开发者
