如何使用 Formik 从 Material UI Select 字段中获取值

Question

对不起，我想使用 Formik 来理解和实现一些东西。

我有两个 select 字段，我想将它们的 selected 值传递给 formik 值。他们所做的基本上是获取 CountryArray 及其对应的区域。我将它们创建为独立组件的原因是，这样我就可以将它们传递给 Formik 中的 Field 组件。我的国家阵列来自 import countries from "../data/c-r";。我还使用 react 中的 useState。但我知道在使用 formik 时，您不再需要管理您的状态，因为 Formik 可以做到这一点。我怎样才能做到这一点。

  const [country, setCountry] = useState("");
  const [region, setRegion] = useState("");

  const CountryComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Country</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={country}
        onChange={handleChangeCountry}
      >
        {countries.map(country => (
          <MenuItem value={country} key={country.countryShortCode}>
            {country.countryName}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );

  const StateComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Region</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={region}
        onChange={handleChangeRegion}
        disabled={!country}
      >
        {country
          ? country.regions.map(region => (
              <MenuItem value={region} key={region.shortCode}>
                {region.name}
              </MenuItem>
            ))
          : []}
      </Select>
    </FormControl>
  );

我做了什么...

<Field
      type="select"
      placeholder="State"
      name="state"
      as={StateComponent}
      fullWidth
      label="Select State"
    />

   <Field
     type="select"
     placeholder="Country"
     name="country"
     as={CountryComponent}
     fullWidth
     label="Select Country"
   />

问题是我无法在 Formik 值中同时获取地区和国家/地区的值，我该怎么做？

谢谢！

Answer 1

我试图做一些类似的事情，用 Formik 和 Material UI.

创建一个国家 select 字段

使用这种库组合时，（Formik and Material-UI) I recommend also to use Formik Material-UI 让您的生活更轻松，而无需将字段的值传递给组件。

关于自定义 select 组件，我所做的是使用 TextField 组件创建它而不是 Material-UI, in the way that is explained here 的 Select 组件，但是使用 Formik [=27= 的 TextField ]-UI图书馆.

因此在表单中，您可以像这样使用 Field 组件：

<Field
  name='country'
  type='text'
  component={CountrySelect}
  label='Country'
  margin='normal'
  variant='outlined'
/>

自定义组件将以这种方式创建：

import { MenuItem} from '@material-ui/core';
import { TextField } from 'formik-material-ui';

const CountrySelect = (props) => {

    const [countries, setCountries] = useState([]);

    useEffect(() => {
        const loadData = () => {
           [..]
        };
        loadData();
    }, []);

    return (
        <TextField
            select
            {...props}
        >
            {countries.length ?
                countries.map((country) => (
                    <MenuItem key={country.code} value={country.code}>
                        {country.name}
                    </MenuItem>
                ))
                :
                <MenuItem>loading...</MenuItem>
            }
        </TextField >
    );

};

在这里你可以看到一个例子： https://codesandbox.io/s/dreamy-franklin-j384c

如何使用 Formik 从 Material UI Select 字段中获取值

How to use Formik to get Values from Material UI Select Fields

reactjs

material-ui

formik