gpt4 book ai didi

reactjs - 如何在 Formik 中从 material-ui-phone-number 提交 MuiPhoneNumber

转载 作者:行者123 更新时间:2023-12-02 16:49:06 35 4
gpt4 key购买 nike

REACT 的新手,请多多包涵:

每当我使用 material-ui-phone-number 提交表单时,我都会不断获取 phoneNumber 的初始值,但什么都不返回插件 Formik .这是我的代码示例。

const initialValues = {
phoneNumber: "",
};

const BasicExample = () => (
<Formik
initialValues={initialValues}>
{() => (
<Form>
<Field
variant="outlined"
label="Phone Number"
name="phoneNumber"
type="tel"
fullWidth
size="small"
defaultCountry={"gh"}
as={MuiPhoneNumber}
/>
</Form>
)}
</Formik>

最佳答案

这是一种方法:

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from "formik";
import MuiPhoneNumber from "material-ui-phone-number";

import "./styles.css";

function App() {
return (
<div className="App">
<Formik
initialValues={{
phoneNumber: ""
}}
onSubmit={values => {
alert(JSON.stringify(values, null, 2));
}}
>
{formikProps => (
<Form>
<MuiPhoneNumber
defaultCountry={"us"}
onChange={e => formikProps.setFieldValue("phoneNumber", e)}
/>
<button type="submit">submit</button>
</Form>
)}
</Formik>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用 MuiPhoneNumber 组件的 onChange 方法来设置 Formik 字段的新值。还有其他方法,但这是我认为最直接的方法。

关于reactjs - 如何在 Formik 中从 material-ui-phone-number 提交 MuiPhoneNumber,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59444764/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com