Question

帮我解决，需要在formik react js中标记为占位符代码如下

import * as React from 'react';
import {render} from 'react-dom';
import {Formik, Field, Form} from 'formik';
import {
  Button,
  LinearProgress,
  MenuItem,
  FormControl,
  InputLabel,
  FormControlLabel,
} from '@material-ui/core';
import MuiTextField from '@material-ui/core/TextField';
import {
  fieldToTextField,
  TextField,
  TextFieldProps,
  Select,
  Switch,
} from 'formik-material-ui';

interface Values {
  email: string;
}

const ranges = [
  {
    value: 'none',
    label: 'None',
  },
  {
    value: '0-20',
    label: '0 to 20',
  },
  {
    value: '21-50',
    label: '21 to 50',
  },
  {
    value: '51-100',
    label: '51 to 100',
  },
];

const UppercasingTextField = (props: TextFieldProps) => (
  <MuiTextField
    {...fieldToTextField(props)}
    onChange={event => {
      const {value} = event.target;
      props.form.setFieldValue(
        props.field.name,
        value ? value.toUpperCase() : ''
      );
    }}
  />
);

const App = () => (
  <Formik
    initialValues={{
      email: '',
      password: '',
      select: '',
      tags: [],
      rememberMe: true,
    }}
    validate={values => {
      const errors: Partial<Values> = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
      ) {
        errors.email = 'Invalid email address';
      }
      return errors;
    }}
    onSubmit={(values, {setSubmitting}) => {
      setTimeout(() => {
        setSubmitting(false);
        alert(JSON.stringify(values, null, 2));
      }, 500);
    }}
    render={({submitForm, isSubmitting, values, setFieldValue}) => (
      <Form>
        <Field
          name="email"
          type="email"
          label="Email"
          variant="outlined"
          component={UppercasingTextField}
        />
        <br />
        <Field
          type="password"
          label="Password"
          name="password"
          component={TextField}
        />
        <br />
        <FormControlLabel
          control={
            <Field label="Remember Me" name="rememberMe" component={Switch} />
          }
          label="Remember Me"
        />
        <br />
        <Field
          type="text"
          name="select"
          label="With Select"
          select
          variant="outlined"
          helperText="Please select Range"
          margin="normal"
          component={TextField}
          InputLabelProps={{
            shrink: true,
          }}
        >
          {ranges.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Field>
        <br />
        <FormControl>
          <InputLabel shrink={true} htmlFor="tags">
            Tags
          </InputLabel>
          <Field
            type="text"
            name="tags"
            component={Select}
            variant="outlined"
            multiple={true}
            inputProps={{name: 'tags', id: 'tags'}}
          >
            <MenuItem value="dogs">Dogs</MenuItem>
            <MenuItem value="cats">Cats</MenuItem>
            <MenuItem value="rats">Rats</MenuItem>
            <MenuItem value="snakes">Snakes</MenuItem>
          </Field>
        </FormControl>
        <br />
        {isSubmitting && <LinearProgress />}
        <br />
        <Button
          variant="contained"
          color="primary"
          disabled={isSubmitting}
          onClick={submitForm}
        >
          Submit
        </Button>
      </Form>
    )}
  />
);

render(<App />, document.getElementById('root'));

首次显示带选择标签作为占位符。当我们选择一个选项时，带有select标签的标签会显示在顶部。在此代码中，标签始终显示在顶部。 example。谢谢！

Answer 1

只需删除 shrink={true}

<FormControl>
          <InputLabel htmlFor="tags">
            Tags
          </InputLabel>
          <Field
            type="text"
            name="tags"
            component={Select}
            variant="outlined"
            multiple={true}
            inputProps={{name: 'tags', id: 'tags'}}
          >
            <MenuItem value="dogs">Dogs</MenuItem>
            <MenuItem value="cats">Cats</MenuItem>
            <MenuItem value="rats">Rats</MenuItem>
            <MenuItem value="snakes">Snakes</MenuItem>
          </Field>
 </FormControl>

Formik选择标签作为占位符

1 个答案: