Question

我使用反应材料进行了一个简单的表单演示，其中我只有一个select字段。我使用此链接进行选择 https://material-ui.com/demos/selects/ 使用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);

Answer 1

您遇到了三个问题，这些问题阻碍了所选组件的正常运行。

您已经创建了一个功能性（无状态）组件。 Learn More.
没有为下拉菜单组件提供onChange，因此，当您选择option时，该组件不会执行任何操作来注册此新状态。
即使使用onChange存储下拉状态，也要向组件传递空value={}。

这是一个有效的解决方案，其中包含针对以下三个问题的解决方案： https://codesandbox.io/s/j2855wrmq5

请注意，我已经将您的功能组件转换为Class。您可以了解有关转换过程here的更多信息。

现在您的组件是一个类，它可以具有状态。这意味着两件事，我们现在通过将状态设置为提供的值来处理onChange事件，并将此值注入到组件中，以便它可以显示您的选择值。

Answer 2

如果我正确理解了您的问题，

您看不到所选的默认值（即无）。
标签弄乱了。

以下是原因：

您提到的所选值是空字符串（“”）。将其更改为有效值（非空）。但是这里的调整是，如果您具有默认值，则验证器将通过，因为该集合具有有效值。不确定在这种情况下为什么要尝试获取验证器。
验证器的工作方式略有不同。它接受TextField组件并将其呈现为select。因此标签需要作为道具发送。

下面是示例code（不支持将外部链接添加为内置代码片段运行器）

希望这会有所帮助

为什么选择的选项隐藏在反应中？

2 个答案: