React js材质ui初始值等于“”答案

【问题标题】：React js material ui initial value equal to ""React js材质ui初始值等于“”
【发布时间】：2020-03-13 00:03:45
【问题描述】：

我有一个选择字段，带有主题，例如以下主题：

名称 -> 标签

“”->/
“日志”-> /日志
“执行”-> /执行

我想确保以名称等于“”的值开始主题，并且标签“/”，即第一个，是我从数据库中获取的值，所以我可以' t 进行更改。

你能帮帮我吗？

代码：

import React from "react";
import "./styles.css";
import { TextField, MenuItem } from "@material-ui/core";

export default function App() {
  const [state, setState] = React.useState({
    pubtopic: "",
    subscriptions: [
      {
        name: "",
        label: "/"
      },
      {
        name: "exec",
        label: "/exec"
      },
      {
        name: "log",
        label: "/log"
      }
    ]
  });

  const { pubtopic, subscriptions } = state;

  const onChange = name => ({ target: { value } }) => {
    setState(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="App">
      <TextField
        id="pubtopic"
        select
        label="Topic"
        placeholder="Topic"
        variant="outlined"
        value={pubtopic}
        onChange={onChange("pubtopic")}
        size="small"
        fullWidth
      >
        {subscriptions.map((el, key) => (
          <MenuItem key={key} value={el.name}>
            {el.label}
          </MenuItem>
        ))}
      </TextField>
      pubtopic: {pubtopic}
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

你需要添加两个才能正常工作：

您需要将Select prop displayEmpty 设置为true，以便它将空字符串值视为仍应尝试显示的内容，而不是将其视为未选择任何内容。
您需要将InputLabel prop shrink 设置为true，这样即使TextField 的当前值为空字符串，它仍会将标签向上移动，而不是将其显示在顶部“/”选项。

以下是基于您的沙盒的工作示例：

import React from "react";
import "./styles.css";
import { TextField, MenuItem } from "@material-ui/core";

export default function App() {
  const [state, setState] = React.useState({
    pubtopic: "",
    subscriptions: [
      {
        name: "",
        label: "/"
      },
      {
        name: "exec",
        label: "/exec"
      },
      {
        name: "log",
        label: "/log"
      }
    ]
  });

  const { pubtopic, subscriptions } = state;

  const onChange = name => ({ target: { value } }) => {
    setState(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="App">
      <TextField
        id="pubtopic"
        select
        label="Topic"
        variant="outlined"
        value={pubtopic}
        onChange={onChange("pubtopic")}
        size="small"
        fullWidth
        SelectProps={{ displayEmpty: true }}
        InputLabelProps={{ shrink: true }}
      >
        {subscriptions.map((el, key) => (
          <MenuItem key={key} value={el.name}>
            {el.label}
          </MenuItem>
        ))}
      </TextField>
      pubtopic: {pubtopic}
    </div>
  );
}

【讨论】：