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

Question

我用react材料做了一个表单的简单演示，其中只有一个select字段，.I使用这个链接使用api使select选项https://material-ui.com/demos/selects/能够在顶部显示标签(使用这个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

有三个问题妨碍了选择组件的正常工作。

1. 您已经创建了一个功能(无状态)组件。了解更多。
2. 下拉组件没有提供一个onChange，所以当您选择一个option时，组件没有做任何事情来注册这个新状态。
3. 即使使用onChange存储下拉状态，也要将空value={}传递给组件。

下面是一个工作解决方案，其中包含了这三个问题的解决方案：https://codesandbox.io/s/j2855wrmq5

注意，我已经将您的功能组件转换为一个类。您可以阅读有关转换过程这里的更多信息。

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

Answer 2

如果我正确理解你的问题，

1. 您无法看到所选的默认值(即无)。
2. 标签搞砸了。

原因如下：

1. 您提到的选定值是空字符串("")。将其更改为有效值(非空)。但是这里的调整是，如果您有一个默认值，验证器就会通过，因为集合有一个有效值。不确定在这种情况下为什么要尝试获得验证器。
2. 验证器的工作方式略有不同。它接受TextField组件并将其呈现为select。所以标签需要作为道具发送。

下面是示例代码 (添加内部构建的代码段运行程序不支持的外部链接)

希望这能有所帮助