Reactの検索フォームに関して

Question

yahoo(https://www.yahoo.co.jp/)
上記のような検索フォームのクリックとボタンのクリックの両方に対応するものを作成したいのですが、①のonClickにはeventが入ってきますが、Buttonの方にはeventは入ってこないと思います。
そこで、この問題に対してのベストソリューションを教えていただけませんでしょうか。
お力添えいただけますと幸いです。
何卒、よろしくお願い致します。

<TextField
    id="outlined-basic"
    label="Outlined"
    variant="outlined"
    onClick={(e) => searchAPI(e.target.value) /> <------- onClick①
<Button 
    variant="outlined"
    onClick={(e) => searchAPI(e.target.value) /> <------- onClick②
>
        Outlined
</Button>

Answer 1

そこまでReactは詳しくはないのですが、React Hook Formなるものを利用してみました。
フォームとして入力値の監視やボタンでの押下にしてデータを受け取ることが出来つつ、TextFieldのクリック時にも別口として受け取ることができるという両面で良いかもしれません。(※もちろん要件によりますが)

import { useForm } from 'react-hook-form'
import TextField from '@mui/material/TextField'
import { Button } from '@mui/material'

function App() {
  const { register, handleSubmit, watch } = useForm()
  const onSubmit = (data) => console.log(data)

  console.log(watch('data'))

  const textFieldClicked = (value) => {
    console.log(`TextField is clicked. (value => ${value})`)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        id='outlined-basic'
        label='Outlined'
        variant='outlined'
        {...register('data')}
        onClick={(e) => textFieldClicked(e.target.value)}></TextField>

      <Button variant='outlined' type='submit'>
        送信
      </Button>
    </form>
  )
}

Comments

[miyu_]

ご回答いただきありがとうございます！
記載漏れがあり申し訳ございませんが、 Textfieldに削除ボタンをつけるにあたって、react hook formのresetで実現できるかを調査してみます！

[miyu_]

resetによるフォームの削除も実現できるようでした。
こちらの方法が最適だと判断させて頂きました。
daichi_mizuno様お力添えいただきありがとうございました！