如何在 Formik 中从 material-ui-phone-number 提交 M12=] 电话号码

Question

REACT 新手，请多多包涵：

每当我使用 material-ui-phone-number plugin with Formik 提交表单时，我总是得到 phoneNumber return 的初始值。这是我的代码示例。

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>

Answer 1

这是一种方法：

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字段的新值。还有其他方法，但我认为这是最直接的。

如何在 Formik 中从 material-ui-phone-number 提交 M12=] 电话号码

How do I submit MuiPhoneNumber from material-ui-phone-number in Formik

reactjs

material-ui

formik