为什么选定的选项隐藏在 React 中?

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

您有三个问题阻止您选择的组件正常工作。

1. 您已经创建了一个功能(无状态(组件。了解更多信息。
2. 下拉列表组件没有提供onChange，因此当您选择option时，该组件不会执行任何操作来注册此新状态。
3. 即使您使用onChange存储下拉列表状态，您也会将空value={}传递给您的组件。

---

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

请注意，我已将函数组件转换为类。您可以在此处阅读有关转换过程的更多信息。

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

Answer 2

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

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

原因如下：

1. 您提到的所选值是空字符串 ("(。将其更改为有效值(非空(。 但这里的调整是，如果你有一个默认值，验证器会随着集合有一个有效值而传递。不知道为什么在这种情况下尝试获取验证器。
2. 验证器的工作方式略有不同。它接受文本字段组件并将其呈现为选择。 所以标签需要作为道具发送。

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

希望这有帮助