如何使用 Formik 从 Material UI Select Fields 中获取值答案

【问题标题】：How to use Formik to get Values from Material UI Select Fields如何使用 Formik 从 Material UI Select Fields 中获取值
【发布时间】：2020-11-19 10:54:16
【问题描述】：

对不起，我想了解并使用Formik 实现一些目标。

我有两个选择字段，我想将它们选择的值传递给 formik 值。他们所做的基本上是获取CountryArray及其对应的区域。我将它们创建为独立组件的原因是，我可以将它们传递给 Formik 中的 Field 组件。我的国家 Array 来自 import countries from "../data/c-r";。我也在使用来自react 的useState。但是我知道在使用 formik 时，您不再需要管理您的状态，cus 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 Value 中获取地区和国家的值，我该怎么做？

谢谢！

【问题讨论】：

标签： reactjs material-ui formik

【解决方案1】：

我试图做一些类似的事情来使用 Formik 和 Material UI 创建一个国家选择字段。

在使用这种库组合时（Formik 和 Material-UI），我还建议使用 Formik Material-UI 让您的生活更轻松，而不必将字段的值传递给组件。

关于自定义选择组件，我所做的是使用 TextField 组件而不是 Material-UI 的 Select 组件创建它，按照 here 解释的方式，但使用 Formik Material-UI 库中的 TextField。

所以在表单中，你可以像这样使用 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

【讨论】：