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

Posted 2023-02-22

技术标签:

【中文标题】为啥选择的选项隐藏在反应中？【英文标题】：why selected option is hidden in react?为什么选择的选项隐藏在反应中？ 【发布时间】：2019-02-12 07:29:53 【问题描述】：

我使用 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);

【问题讨论】：

【参考方案1】：

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

您无法看到已选择的默认值（即无）。标签搞砸了。

原因如下：

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

下面是示例code（不支持添加外部链接作为内置的sn-p runner）

希望对你有帮助

【讨论】：

【参考方案2】：

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

onChange

option

onChange

value=

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

请注意，我已将您的功能组件转换为类。您可以阅读更多关于转换过程的信息here。

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