迹忆客 专注技术分享

可重用的组件使在 React 中构建 UI 变得容易。Material UI 是最好的库之一，它提供自定义组件来帮助你在 React 中构建具有视觉吸引力和功能性的 UI。

该库包含用于许多不同目的的自定义组件。React 开发人员通常没有时间从头开始创建和设置输入组件的样式，因此他们从 Material UI 导入它们。

这些自定义组件通常具有标准外观，但它们具有提供许多自定义选项的内置 props。你可以使用它们来自定义自定义输入组件的外观和功能。

本文将讨论 Material UI 中的自定义输入组件之一。

该组件基于常规 HTML 中相同类型的 input 元素。选择 自定义组件允许你为用户提供多种选择。

自定义 Select 组件中的内置 props 使你能够创建适合你应用程序需求的元素。

例如，你可以让用户自由选择多个选项、自定义标签、自定义颜色等等。

定制的可能性有很多。查看官方 API 文档 以获得更好的想法。

有时，你需要将 Select 组件作为开发 React 应用程序的必需输入。这样，他们必须在继续下一步之前选择一个值。

如果用户决定在没有选择值的情况下提交表单，则该表单将不会被提交并会引发错误。此错误可能是选择组件下方的文本、弹出窗口或工具提示。

使用红色表示错误是一种常见的 UX 模式。

让我们看一个实际的例子。

export default function App() {
  const [error, setError] = useState(false);
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <form>
      <FormControl error={error} style={{ width: "200px" }}>
        <InputLabel htmlFor="age">Select Age</InputLabel>
        <Select
          name="age"
          value={selectedValue}
          onChange={(e) => setSelectedValue(e.target.value)}
        >
          <MenuItem value={10}>10</MenuItem>
          <MenuItem value={20}>20</MenuItem>
          <MenuItem value={30}>30</MenuItem>
        </Select>
        {error && <FormHelperText>Select a value</FormHelperText>}
      </FormControl>
      <br />
      <br />
      <button type="button" onClick={() => setError(!selectedValue)}>
        Submit
      </button>
    </form>
  );
}

这里有很多东西要解开。让我们从两个状态值开始 - error 和 selectedValue。我们使用 useState 挂钩来创建这些变量和更新它们的函数。

我们更新 error 变量的值以有条件地显示（或隐藏）错误消息。默认情况下，此值设置为 false 布尔值。

我们使用 selectedValue 变量来存储用户选择的值。默认情况下，我们将此变量设置为 null。

如果用户没有选择任何值并尝试通过单击按钮提交表单，则事件处理程序将翻转默认的 null 值并将 error 变量设置为 true。

然后我们的表单将显示一条错误消息。

我们还设置了一个 onChange 事件监听器。每当用户选择与当前选择不同的值时，事件侦听器将更新 selectedValue 变量。