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

Question

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>

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