Невозможно добавить элементы в форму Material-UI - PullRequest
Новая
       3

Невозможно добавить элементы в форму Material-UI

2 голосов
/ 15 октября 2019

Я получил проект от кого-то другого, и мне нужно добавить некоторые элементы в форму, созданную с помощью response и material-ui. Я могу заставить текстовые поля работать, но если я пытаюсь добавить выпадающий список, он не удерживает значение при выборе.

Я следовал тем же правилам добавления элементов в форму, что и парень, создавший это. Форма используется.

Я добавил элемент сетки с компонентом formcontrol внутри него. Был также набор параметров по умолчанию с «игровым» объектом внутри, который имел все поля формы в качестве свойств. Я также добавил туда новые элементы поля.

Вот весь компонент формы, потому что я не совсем уверен, где проблема на самом деле. 

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import history from '~/utils/history';
import { FormControl, Button, TextField, Grid, MenuItem, FormHelperText } from '@material-ui/core';
import { DateTimePicker } from 'material-ui-pickers';
import gameState from '~/utils/enums';
import { dateTime } from '~/utils/formats';

import { getById, create, update, remove } from '~/services/games';
import { getAll as getLeagues } from '~/services/leagues';
import { getAll as getSeasons } from '~/services/seasons';
import { getAll as getTeams } from '~/services/teams';

const GameForm = ({ game, id }) => {
  useEffect(() => {
    console.log({ form, game });
  });

  const [edit, setEdit] = useState(false);
  const [form, setForm] = useState(game);
  const [error, setError] = useState('');
  const [variant, setVariant] = useState('outlined');

  const [leagues, setLeagues] = useState([]);
  const [seasons, setSeasons] = useState([]);
  const [teams, setTeams] = useState([]);
  const [gametype, setGametype] = useState(1);

  const gametypes = [
    { key: 0, value: 'Series Game' },
    { key: 1, value: 'Playoff' },
    { key: 2, value: 'Final' },
    { key: 3, value: 'Else' }
  ];

  useEffect(() => {
    getSeasons()
      .then(({ data }) => {
        setSeasons(data);
        return getLeagues();
      })
      .then(({ data }) => {
        setLeagues(data);
        if (id) {
          getById(id).then(({ data }) => setForm(data));
        } else {
          setEdit(true);
        }
      });
  }, []);

  useEffect(() => {
    if (edit) {
      setVariant('outlined');
    } else {
      setVariant('standard');
    }
  }, [edit]);

  useEffect(() => {
    if (form.league) {
      getTeams({ leagues: [form.league] }).then(({ data }) => setTeams(data));
    }
  }, [form.league]);

  useEffect(() => {
    if (form.gametype) {
      setGametype('Playoff');
    }
  }, [form.gametype]);

  const handleChange = ({ target }) => {
    let { name, value } = target;
    setForm({
      ...form,
      [name]: value
    });
  };

  const handleDateChange = formInputName => {
    const dateHandler = moment => {
      setForm({
        ...form,
        [formInputName]: moment ? moment.toDate() : null
      });
    };
    return dateHandler;
  };

  const handleFormSubmit = () => {
    if (!edit) {
      setEdit(true);
    } else {
      new Promise(resolve => {
        resolve(form._id ? update(form) : create(form));
      })
        .then(() => {
          history.push('/games');
        })
        .catch(error => setError(error.response.data.error));
    }
  };
  const handleDelete = () => {
    if (window.confirm(`Delete permanently?`)) {
      remove(id).then(() => history.goBack());
    }
  };

  const handleCancel = () => {
    if (edit && id) {
      setEdit(false);
    } else {
      history.goBack();
    }
  };
  return (
    <Grid container spacing={8} justify="space-between">
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            required
            select
            id="season"
            name="season"
            label="Season"
            variant={variant}
            disabled={!edit}
            value={form.season}
            onChange={handleChange}
          >
            {seasons.map(option => (
              <MenuItem key={option.name} value={option._id}>
                {option.name}
              </MenuItem>
            ))}
          </TextField>
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            required
            select
            id="league"
            name="league"
            label="League"
            variant={variant}
            disabled={!edit}
            value={form.league}
            onChange={handleChange}
          >
            {leagues.map(option => (
              <MenuItem key={option.name} value={option._id}>
                {option.name}
              </MenuItem>
            ))}
          </TextField>
        </FormControl>
      </Grid>
      <Grid item xs={12}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <DateTimePicker
            required
            id="start"
            name="start"
            label="Game starts"
            variant={variant}
            disabled={!edit || !form.season}
            autoOk
            ampm={false}
            keyboard
            clearable
            minDate={form.season ? seasons.find(({ _id }) => _id === form.season).start : undefined}
            minDateMessage="Cannot start before the season begins"
            maxDate={form.season ? seasons.find(({ _id }) => _id === form.season).end : undefined}
            maxDateMessage="Cannot start after the end of the season"
            value={form.start}
            onChange={handleDateChange('start')}
            {...dateTime}
          />
          <FormHelperText disabled={!form.season}>
            {!form.season ? 'Select season first' : undefined}
          </FormHelperText>
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            required
            select
            id="home"
            name="home"
            label="Home team"
            variant={variant}
            disabled={!edit || !form.league}
            helperText={!form.league ? 'Select league first' : undefined}
            value={form.home}
            onChange={handleChange}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            {teams
              .filter(({ _id }) => _id !== form.away)
              .map(option => (
                <MenuItem key={option.name} value={option._id}>
                  {option.name}
                </MenuItem>
              ))}
          </TextField>
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            required
            select
            id="away"
            name="away"
            label="Team away"
            variant={variant}
            disabled={!edit || !form.league}
            helperText={!form.league ? 'Select league first' : undefined}
            value={form.away}
            onChange={handleChange}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            {teams
              .filter(({ _id }) => _id !== form.home)
              .map(option => (
                <MenuItem key={option.name} value={option._id}>
                  {option.name}
                </MenuItem>
              ))}
          </TextField>
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            required
            select
            id="gametype"
            label=" Game type"
            variant={variant}
            disabled={!edit}
            value={form.gametype}
            onChange={handleChange}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            {gametypes.map(option => (
              <MenuItem key={option.key} value={option.value}>
                {option.value}
              </MenuItem>
            ))}
          </TextField>
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            text
            id="umpire"
            label="Umpire"
            variant={variant}
            disabled={!edit || !form.league}
          />
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            text
            id="scorekeeper"
            label="Scorekeeper"
            variant={variant}
            disabled={!edit || !form.league}
          />
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            text
            id="referee1"
            label="Referee 1"
            variant={variant}
            disabled={!edit || !form.league}
          />
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            text
            id="referee2"
            label="Referee 2"
            variant={variant}
            disabled={!edit || !form.league}
          />
        </FormControl>
      </Grid>
      <Grid item xs={12} md={6}>
        <FormControl margin="normal" required fullWidth variant="outlined">
          <TextField
            text
            id="referee3"
            label="Referee 3"
            variant={variant}
            disabled={!edit || !form.league}
          />
        </FormControl>
      </Grid>
      <Grid item xs={edit && id ? 4 : 6}>
        <Button variant="outlined" color="secondary" fullWidth onClick={handleCancel}>
          {edit && id ? 'Cancel' : 'Back'}
        </Button>
      </Grid>
      {edit && id ? (
        <Grid item xs={4}>
          <Button
            type="submit"
            variant="contained"
            color="secondary"
            fullWidth
            onClick={handleDelete}
          >
            Delete
          </Button>
        </Grid>
      ) : null}
      <Grid item xs={edit && id ? 4 : 6}>
        <Button
          type="submit"
          variant="outlined"
          color="primary"
          fullWidth
          onClick={handleFormSubmit}
        >
          {edit ? (id ? 'Save' : 'Create') : 'Edit Game'}
        </Button>
      </Grid>
      {!edit ? (
        <Grid item xs={12}>
          <Button
            variant="outlined"
            color="primary"
            fullWidth
            onClick={() => {
              history.push('/games/' + id + '/scores');
            }}
          >
            EDIT SCORES
          </Button>
        </Grid>
      ) : null}
    </Grid>
  );
};

GameForm.defaultProps = {
  game: {
    season: '',
    league: '',
    start: null,
    home: '',
    away: '',
    gametype: '',
    umpire: '',
    scorekeeper: '',
    referee1: '',
    referee2: '',
    referee3: ''
  }
};

GameForm.propTypes = {
  //classes: PropTypes.object.isRequired,
  game: PropTypes.object
};

export default GameForm;

Я заметил, что если я печатаюигровой объект для консоли, он показывает только старые элементы формы, а не новые, которые я добавил. Новые предметы: игровой тип, судья, секретарь, рефери1-3.

Я пытался сделать эту работу уже несколько дней, поэтому любая помощь будет по достоинству оценена.

1 Ответ

0 голосов
/ 15 октября 2019

вам нужно onChange = {handleChange} в тех, и вы также должны предоставить имя в качестве реквизита

Кстати, я настоятельно рекомендую вам объединить эти useStates в один объект состояния

ДляНапример, альтернатива запретила множественные вызовы useState () в компоненте. Вы бы сохранили состояние в одном объекте. 

function Form() {
  const [state, setState] = useState({
    edit: '',
    form: '',
    error: '',
  });
  // ...
}

Чтобы было ясно, крючки разрешают этот стиль. Вам не нужно разбивать ваше состояние на кучу переменных состояния (см. doc ).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...