【React】Material-uiでテキストボックスにアイコンボタンが入ったやつを作成する

MaterialUI

2022.05.12

環境
やりたいこと
実装

環境

React 18.0.0
Material-ui/core 4.12.4
Material-ui/icon 4.11.3

やりたいこと

ReactとMaterial-uiを使用してテキストボックスにボタンが入ったスタイルのコンポーネントを作成しました。

今回MaterialUIのv4系で記述していますが、適宜v5系に読み替えていただければと思います。

（Importによるモジュールの呼び出し方が違うと思います。）

実装

ソースコードはこちら

CreateItem.js

import { TextField } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import { useState } from "react";
import AssignmentTurnedInIcon from "@material-ui/icons/AssignmentTurnedIn";

const CreateItem = (props) => {
  const [newTodo, setNewTodo] = useState("");

  // TextfieldとButtonIconを合体させたコンポーネントの作成
  const AddButton = () => {
    const addButtonClick = () => {
      alert('ボタンを押しただろ！')
    };
    return (
      <IconButton onClick={() => addButtonClick()}>
        <AssignmentTurnedInIcon />
      </IconButton>
    );
  };

  return (
    <TextField
      label="TODOを追加"
      value={newTodo}
      onChange={(e) => setNewTodo(e.target.value)}
      InputProps={{ endAdornment: <AddButton /> }}
    />
  );
};

export default CreateItem;

app.js

import { useState } from "react";
import CreateItem from "./components/CreateItem";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <CreateItem />
    </div>
  );
}

実行すると以下のようになると思います。