我有以下代碼：
import React, { useEffect, useState } from "react";
import { Formik, Field } from "formik";
import MaskedInput from "react-text-mask";
const phoneNumberMask = [ "(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/ ];
export default () => {
const [formValues, setFormValues] = useState(null);
useEffect(() => {
setTimeout(() => {
setFormValues({ phone: '9178889999' });
}, 1000)
}, []);
const onSubmit = (values) => {
console.log(values);
};
return (
<div className="app">
<Formik
initialValues={{ phone: '9134445555' }}
onSubmit={onSubmit}
enableReinitialize
>
{props => {
const {
handleChange,
handleSubmit,
} = props;
return (
<form onSubmit={handleSubmit}>
<Field name="phone">
{
({ field }) => <MaskedInput
{...field}
type="text"
mask={phoneNumberMask}
placeholder="Enter your phone number"
onChange={handleChange}
className="text-input"
/>
}
</Field>
<button type="submit">
Submit
</button>
</form>
);
}}
</Formik>
</div>
);
};
MaskedInput最初用 value: 填充的地方9134445555format: (913) 444-5555。
我的問題是：呼叫：setFormValues(...)從內部不起作用：useEffect超時后1 s (1000 ms)。
我的目標
- 將
MaskedInput被填充與第二個值：9178889999后1 s。 - 在
MaskedInput示出了具有適當的格式的所述第二值：(917) 888-9999。
uj5u.com熱心網友回復：
問題很簡單，你沒有連接formValues到你的initialValues.
這會導致另一個問題，您的掩碼沒有正確更新：React Form value not updated when toggling InputMask mask。
uj5u.com熱心網友回復：
這是在上面的代碼中實作這兩個目標的最簡單方法：
更改：
initialValues={{ phone: '9134445555' }}至：initialValues={ formValues || { phone: '9134445555' } }關于
package.json變化："react-text-mask": "^5.4.3"到"react-text-mask": "5.4.1"。
如果我們使用截至今天的最新版本：5.4.3那么該模式將不會應用于值更改。此問題發生在版本：5.4.2. 但是， version: 上不存在該問題5.4.1。這就是我使用那個版本的原因。
順便說一下，這個庫似乎沒有維護，因為：July 2018.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407018.html
標籤：