【React】入力フォームのリセットボタンのサンプルコード

import prof from './profImg.jpg';
import './App.css';
import { useState } from 'react';

// atoms
function ProfIcon() {
  return (
    <div className='profImg'>
      <img
        src={prof}
        alt="プロフィール画像"
      />
    </div>
  );
}
function ProfText({ value }) {
  return (
    <p>{value}</p>
  );
}
function ProfNameInput({ name, value, onChange, placeholder }) {
  return (
    <input name={name} value={value} onChange={onChange} placeholder={placeholder}/>
  );
}
function ProfDepInput({ name, value, onChange, placeholder }) {
  return (
    <input name={name} value={value} onChange={onChange} placeholder={placeholder}/>
  );
}
function ProfResetButton({ value, onClick }) {
  console.log('リセットボタンがクリックされました');
  return (
    <button className='profResetButton' onClick={onClick}>{value}</button>
  );
}

// molecules
export default function App() {
  const [textName, setTextName] = useState('');
  const [textDep, setTextDep] = useState('');

  function handleChangeName(e) {
    setTextName(e.target.value);
  }
  function handleChangeDep(e) {
    setTextDep(e.target.value);
  }
  return (
    <>
      <div className='profCard'>
        <div className='profTextWrap'>
          <ProfIcon />
          <div className='profTextInner'>
            <ProfText value="名前" />
            <ProfNameInput name="myName" value={textName} onChange={handleChangeName} placeholder="名前を入力してください"/>
          </div>
          <div className='profTextInner'>
            <ProfText value="部署" />
            <ProfDepInput name="myDep" value={textDep} onChange={handleChangeDep} placeholder="部署を入力してください"/>
          </div>
        </div>
        <ProfResetButton value="リセット" onClick={() => {setTextName('');setTextDep('')}} />
      </div>
    </>
  );
}
// export default App;

body{
  margin: 32px;
  padding: 32px;
}
::placeholder {
  font-size: 14px;
  color: rgb(196, 196, 196);
}
/*atoms*/
.profImg{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profImg img{
  margin-left: 12px;
  width: auto;
  height: 110%;
}
.profCard p{
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}
.profCard input{
  font-size: 16px;
  height: 32px;
  width: 100%;
  padding: 0 8px;
}
.profResetButton{
  width:200px;
  height:40px;
  border-radius: 8px;
  border: none;
  background-color: #3395f1;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/*molecules*/
.profCard{
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 16px 32px;
  gap:16px;
  border: #3395f1 1px solid;
  border-radius: 8px;
  box-shadow: rgba(100, 95, 95, 0.1) 0px 4px 12px;
}
.profTextWrap{
  display: flex;
  flex-direction: row;
  padding: 16px;
  gap: 8px;
}
.profTextInner{
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}