在 Material UI 按鈕上使用事件處理程式和其他屬性

1. React 中 Material UI 中的按鈕
2. 在 React 中處理 Material UI 中的按鈕事件
3. React 中自定義 <Button> 元件的 API

Material UI 之類的庫有助於設計 React 應用程式的使用者介面，而無需花費太多時間。該庫包含許多為 React 顯式建立的自定義元件。

這些元件是可定製的，因此你可以調整它們以適合你的 React 應用程式的樣式和調色盤。Material UI 基於 Material Design，它是 Google 設計原則和指南的集合。

自定義 Material UI 元件提供了一種設定應用程式樣式的簡單方法。它沒有以 React 框架的預設功能的形式出現，例如 state、event handlers 等。

你可以使用事件處理程式，例如 onClick()，就像你將它們用於常見的 HTML 元素一樣。

React 中 Material UI 中的按鈕

很難想象任何沒有按鈕的使用者介面。這是傾聽使用者輸入並響應他們的行為的基本方式。

Material UI 有一個 <Button> 元件，它接受 variant、color、href 等屬性。你可以設定這些 props 的值來自定義按鈕的外觀和行為。

Material UI 中有三個不同的按鈕和三個對應的 variant 屬性值：text、contained 和 outlined。

你可以在實時 codesandbox 上檢視每種型別的外觀。

要了解有關 Material UI（以及一般的 React）中按鈕的更多資訊，請閱讀官方文件。

在 React 中處理 Material UI 中的按鈕事件

與 HTML 中的常規 <button> 元素類似，Material UI 包中的 Button 元件也接受事件處理程式屬性和函式。

按鈕最常用的事件處理程式是 onClick。讓我們看一個例子：

export default function App() {
  return (
    <div className="App">
      <Button variant="outlined" color="primary">Outlined Button</Button>
          
      <Button variant="contained" color="primary" onClick={() => alert("clicked")}>Contained Button</Button>
          
      <Button variant="text" color="primary">Text Button</Button>
    </div>
  );

在這個例子中，如果我們點選第二個按鈕，它將顯示一個帶有文字 clicked 的彈出視窗。

你可以在 codesandbox 上自己嘗試一下。

React 中自定義 <Button> 元件的 API

如果你檢視 <Button> 自定義元件的 API 頁面，它不會將 onClick 或其他本機事件處理程式列為好 props。

為了保持文件簡短，<Button> 元件的官方 API 文件中沒有所有本機可用的屬性和事件處理程式。

這是因為庫建立者假定你知道 <button> HTML 元素的所有本機事件處理程式和屬性都可用於自定義 <Button> 元件。