我使用 react Material 制作了一个简单的表单演示,其中我只有一个 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);
最佳答案
您遇到了三个问题,导致您选择的组件无法正常工作。
- 您已经创建了一个功能性(无状态)组件。 Learn More.
- 下拉组件未提供
onChange
,因此当您选择一个option
时,该组件不会执行任何操作来注册此新状态。 - 即使您使用
onChange
存储下拉列表状态,您也会将空value={}
传递给您的组件。
这是一个有效的解决方案,其中包含针对这三个问题的解决方案: https://codesandbox.io/s/j2855wrmq5
请注意,我已将您的功能组件转换为类。您可以阅读有关转换过程的更多信息 here .
现在您的组件是一个类,它可以有状态。这意味着两件事,我们现在通过将我们的状态设置为提供的值来处理 onChange
事件,并且我们将这个值注入(inject)我们的组件,以便它可以显示您的选择值。
关于javascript - 为什么选择的选项隐藏在 react 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52214154/