почему выбранная опция скрыта в реакции? - PullRequest
Новая
       9

почему выбранная опция скрыта в реакции?

0 голосов
/ 07 сентября 2018

Я сделал простую демонстрацию формы, используя реактивный материал, в котором у меня есть только одно поле select. Я использовал эту ссылку, чтобы сделать опцию выбора https://material -ui.com / демки / выбирает / используя api Я могу показать метку сверху (используя это shrink={true}) и показать отключенное значение, используя это displayEmpty. так что моя форма выглядит так без какой-либо проверки https://codesandbox.io/s/8x4wnjnrz8

Теперь я пытаюсь проверить мою форму с помощью этого плагина. https://www.npmjs.com/package/react-material-ui-form-validator но моя опция по умолчанию скрыта, и метка окна выбора также выглядит неловко и становится маленькой

вот мой код https://codesandbox.io/s/8x4wnjnrz8 

import ReactDOM from "react-dom";
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import { FormControl, Button } from "@material-ui/core";
import Select from "@material-ui/core/Select";
import "./styles.css";
import {
  ValidatorForm,
  TextValidator,
  SelectValidator
} from "react-material-ui-form-validator";

function App() {
  return (
    <div className="App">
      <ValidatorForm onSubmit={() => {}} className="" autoComplete="off">
        <FormControl>
          <InputLabel shrink={true} htmlFor="age-simple">
            Age
          </InputLabel>

          <SelectValidator
            required
            value=""
            name="name"
            displayEmpty
            validators={["required"]}
            errorMessages={["this field is required", "email is not valid"]}
            inputProps={{
              name: "age",
              id: "age-simple"
            }}
            input={<Input id="age-simple" />}
            className=""
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </SelectValidator>
        </FormControl>
        <Button type="submit"> submit</Button>
      </ValidatorForm>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Если я правильно понимаю вашу проблему,

  1. Вы не можете видеть значение по умолчанию (т.е. отсутствует) как выбранное.
  2. Метка испорчена.

Ниже приведены причины (ы):

  1. Выбранное вами значение является пустой строкой (""). Измените его на действительное значение (не пусто). Но здесь есть настройка: если у вас есть значение по умолчанию, валидатор проходит, так как набор имеет допустимое значение. Не уверен, почему вы пытаетесь получить валидатор в этой ситуации.
  2. Способ работы валидатора немного другой. Он принимает компонент TextField и отображает его как select. Поэтому этикетка должна быть отправлена ​​как реквизит.

Ниже приведен пример кода (Добавление внешней ссылки, поскольку встроенный бегущий фрагмент не поддерживает)

Надеюсь, это поможет

0 голосов
/ 07 сентября 2018

У вас есть три проблемы, которые мешают вашему выбранному компоненту работать должным образом.

  1. Вы создали функциональный (не сохраняющий состояние) компонент. Узнать больше.
  2. Компонент раскрывающегося списка не предоставлен onChange, поэтому, когда вы выбираете option, компонент ничего не делает для регистрации этого нового состояния.
  3. Даже если вы сохраняли раскрывающееся состояние с помощью onChange, вы передаете нулевой value={} своему компоненту.

Вот рабочее решение, которое содержит решения этих трех проблем: https://codesandbox.io/s/j2855wrmq5

Обратите внимание, что я преобразовал ваш функциональный компонент в класс. Вы можете прочитать больше о процессе конвертации здесь .

Теперь, когда ваш компонент является классом, он может иметь состояние. Это означает две вещи, теперь мы обрабатываем событие onChange, устанавливая наше состояние в соответствии с предоставленным значением, и мы внедряем это значение в наш компонент, чтобы он мог отображать значение вашего выбора.

...