使從 Material UI 中選擇元件成為必需的輸入

1. 從 React 中的 Material UI 中選擇元件
2. 如何使 Material UI 中的 Select 元件成為 React 中的必需輸入

可重用的元件使在 React 中構建 UI 變得容易。Material UI 是最好的庫之一，它提供自定義元件來幫助你在 React 中構建具有視覺吸引力和功能性的 UI。

該庫包含用於許多不同目的的自定義元件。React 開發人員通常沒有時間從頭開始建立和設定輸入元件的樣式，因此他們從 Material UI 匯入它們。

這些自定義元件通常具有標準外觀，但它們具有提供許多自定義選項的內建 props。你可以使用它們來自定義自定義輸入元件的外觀和功能。

本文將討論 Material UI 中的自定義輸入元件之一。

從 React 中的 Material UI 中選擇元件

該元件基於常規 HTML 中相同型別的 input 元素。選擇 自定義元件允許你為使用者提供多種選擇。

自定義 Select 元件中的內建 props 使你能夠建立適合你應用程式需求的元素。

例如，你可以讓使用者自由選擇多個選項、自定義標籤、自定義顏色等等。

定製的可能性有很多。檢視官方 API 文件 以獲得更好的想法。

如何使 Material UI 中的 Select 元件成為 React 中的必需輸入

有時，你需要將 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 變數。

你可以在 codesandbox 上嘗試演示。