标签: formik-material-ui

我试图弄清楚如何按照此处的 Formik、Material UI、React 工具的 Autocomplete 字段文档中的说明进行操作。

文档中给出的示例是：

import { Autocomplete } from 'formik-material-ui-lab';

const options = [{ title: 'The Shawshank Redemption', year: 1994 }, ...]

<Field
  name="name"
  component={Autocomplete}
  options={options}
  getOptionLabel={(option: Movie) => option.title}
  style={{ width: 300 }}
  renderInput={(params: AutocompleteRenderInputParams) => (
    <TextField
      {...params}
      error={touched['name'] && !!errors['name']}
      helperText={errors['name']}
      label="Autocomplete"
      variant="outlined"
    />
  )}
/>;

没有给出关于在 getOptionLabel 中使用 Movie 的含义的线索。当我尝试使用它时，电影和渲染输入对象中的 AutocompleteRenderInputParams 都带有下划线。我不知道为什么。

我看过这篇文章，它尝试了一种替代方法，但我也无法让它发挥作用。

我有一个表格，有两个自动完成字段。目前，它看起来像这样。

当我尝试使用表单时，提交按钮挂起，控制台日志显示：

Material-UI：getOptionLabel自动完成的方法返回 undefined 而不是“”的字符串。

import React, { useState } from 'react';
import { …

我正在尝试使用类似于单选按钮的 Material UI 切换按钮，为用户提供针对给定问题的 2 个选择。

它的功能基本符合预期，但是当尝试调整选择每个切换按钮时的样式时，我无法更改切换按钮的背景颜色。我在 ToggleButton 组件上使用 classes 属性，并在该属性中使用“selected”规则。某些 css 属性（例如 padding 和 boxShadow）可以正常工作，但其他属性（包括 backgroundColor）则不能。我的目标是使“切换”按钮在选择时具有蓝色背景，但到目前为止，我无法让它在选择时以与深灰色背景不同的方式显示。

我正在使用 React，以及 Formik 和 Formik-Material-UI。这是我的代码：

const useStyles = makeStyles((theme) => ({
  toggleButton: {
    backgroundColor: 'blue',
    border: [10, 'solid', 'black'],
    padding: 10,
    boxShadow: [
      [0, 0, 0, 1, 'blue'],
    ],

  }
}));

export function ScheduleAndServices(props) {
  const classes = useStyles(props);

return (

            <Field 
              component={ToggleButtonGroup} 
              name="requestType" 
              type="checkbox" 
              exclusive
            >
              <ToggleButton 
                value="ps" 
                aria-label="Temporary/Occasional" 
                selected={values.requestType === "ps" ? true : false}
                classes={{selected: classes.toggleButton}}
              >Temporary/Occasional   
              </ToggleButton>
              
              <ToggleButton 
                value="reg" …

我正在尝试将 formik 与具有 select attr 的material-ui Textfield 组件一起使用，每次我更改选项时都会出现此警告

\n

nullMaterial-UI: 您为 select (name="subIndicatorId") 组件提供了超出范围的值。\n请考虑提供与可用选项之一或 \'\' 匹配的值。\n可用值有1、2,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3​4​5​55​161​162​163​164​193​233​234​235​236​237​238​239​240​241​242​243​244​245​246​262​263​264​265​266​267​ …

我使用material-ui (v5) 和formik 的自动完成字段来生成我的表单。在这个表单上，我有一些定义为常量的列表。

我使用 api 来获取此列表的默认值。此 api 仅返回选项的“代码”，而不返回其标签。

<Formik
        enableReinitialize
        initialValues={initialFormValues}
        validationSchema={Yup.object().shape({
[...]
<Autocomplete
  error={Boolean(touched.civility && errors.civility)}
  helperText={touched.civility && errors.civility}
  label="Civility"
  margin="normal"
  name="civility"
  onBlur={handleBlur}
  onChange={(e, value) => setFieldValue('civility', value)}
  options={civilities}
  value={values.civility}
  getOptionLabel={(option) =>
    option.name ? option.name : ''
  }
  isOptionEqualToValue={(option, value) => option.code === value}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      label={<Trans>Civility</Trans>}
    />
  )}
/>

我的参数 isOptionEqualToValue 很好，因为即使该值没有显示在输入中，它也可以在列表中很好地选择。

您可以看到输入文本字段为空：

但是如果我展开列表，我可以看到我的“ms”值已被选择：

我应该怎么做才能使输入文本包含默认值？

在我的 React 代码中，连同其他输入类型，我还必须使用 material-ui 的 ToggleButtonGroup 组件。formik-material-ui 不直接支持此组件，我一直在尝试编写自定义包装器，但没有取得太大成功。这是我的组件的外观（formikToggleButtonGroup.tsx）：

import * as React from 'react';
import MuiToggleButtonGroup, {
  ToggleButtonGroupProps as MuiToggleButtonGroupProps,
} from '@material-ui/lab/ToggleButtonGroup';
import { FieldProps } from 'formik';

export interface ToggleButtonGroupProps
  extends FieldProps,
    Omit<MuiToggleButtonGroupProps, 'name' | 'value'> {}

export function fieldToToggleButtonGroup({
  field,
  // Exclude Form
  form,
  ...props
}: ToggleButtonGroupProps): MuiToggleButtonGroupProps {
  return {
    ...props,
    ...field,
  };
}

export default function ToggleButtonGroup(props: ToggleButtonGroupProps) {
  return <MuiToggleButtonGroup {...fieldToToggleButtonGroup(props)} />;
}
ToggleButtonGroup.displayName = 'FormikMaterialUIToggleButtonGroup';`

然后，我试图像这样使用它：

import Layout from '../../components/layout'
import Header from …

Material-ui用+制作表格react。有没有办法将标签布局到输入字段的一侧？它更具可读性。

像这样：

name   [input]
title  [input]

而不是

name  
[input]
title 
[input]

我只能找到将标签和输入区域混合在一起的字段。我可以构建自己的组件或网格，但似乎这是一个应该存在的明显布局。

文档页面 https://material-ui.com/components/text-fields/

我正在使用 Formik 并进行了以下设置，我希望能够在用户按下“取消”按钮时重置表单。返回表单时，所有表单值都应重置为空initialValues。

        <Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (

          <Form>
             .....

我有以下取消按钮的代码：

                  <Button
                      text="Cancel"
                      startIcon={<UndoIcon />}
                      variant="contained"
                      color="default"
                      className={classes.buttons}                          
                      component={Link} 
                      to={'/home'}
                      onClick={() => { 
                          {resetForm}
                          setMenu("Home")
                      }}
                  />            

在表单字段中输入一些文本并按取消按钮（这会将我引导回主页）后，我返回表单并注意到我的文本仍处于表单内的状态并且没有重置。

任何人都可以帮忙解决我所缺少的东西吗？

我正在使用 Material-UI Accordion，内部AccordionSummary有一个<TextField />（实际上由 Formik 和 formik-material-ui 控制），并且AccordionSummary仅在字段内单击时背景变为灰色。我不希望它这样做，而且它似乎不是由 Accordion API 配置的任何内容，除非我遗漏了某些内容。我怎样才能阻止它这样做？

我在Codesandbox上重新创建了该问题。

这是沙箱中的完整代码：

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import { TextField, CheckboxWithLabel, Select } from "formik-material-ui";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import FormControl from "@material-ui/core/FormControl";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() { …