3
Help us understand the problem. What are the problem?

posted at

updated at

React: useRefで参照したinputから同じformのsubmitボタンを辿る

ReactでuseRefで参照したinputから同じformのsubmitボタンを辿って別コンポーネントからsubmitボタンをクリックするメモ

——formのref(例えばformRefという名前)を渡して、formRef.submit()すると、ページ更新されてしまうのでsubmitボタンをクリックすることにした。なにかいい方法がある気はするが、とりあえず回避策——

ComponentBからComponentAのformをSubmitする。但し渡すのはinputのrefとする。つまり、ComponentBからinputに値をセットしてからSubmitしたい。

"form" と Element ID で辿れる。

ComponentA
export default function ComponentA(props) {
  const inputTextRef = useRef()

  const onSubmit = (e) => {
    e.preventDefault()
    ...何かの処理...
  }

  return (
    <form onSubmit={ onSubmit }>
      <input type="text" ref={ inputTextRef } />   {/* <-- refを取るのはinput要素とする */}
      <button type="submit" id="submitButton">Submit</button>   {/* <-- idを設定 */}
    </form>
    <ComponentB inputTextRef={ inputTextRef } />
  )
}
ComponentB
export default function ComponentB(props) {

 const submitWithValue = (e) => {
    e.preventDefault()
    props.inputTextRef.current.value = "Special Value"   // <-- ref参照先を更新
    props.inputTextRef.current.form.submitButton.click() // <-- 同じformのsubmitボタンをこんなふうにたどれる
 }

 return (
   <button onClick={ submitWithValue } >Submit ComponentA with a special value</button>
 )
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?