aono1234
@aono1234

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

コンポーネントの状態変更はどちらが良いか?

コンポーネントの状態変化はどのように行えばよいか?

現在Reactを勉強中なのですが、コンポーネントのstyleを変更させたいと思っております。
変更するコードは自体はすぐにできるのですが、最適な方法が分かりません。
例えば以下のように2つの方法で状態変更をさせることができます。

①クリックイベントと関数でstyleを変更する方法

  const styleHandler = (e: React.MouseEvent<HTMLInputElement>) => {
    e.target.style.border = "dashed"
  }

  return (
    <div onClick={styleHandler}>
      <div
        className='technology'
      >
      </div>
    </div>
  )

②useEffectとuseRefで変更する方法

  const [active, setActive] = useState(false)
 
  useEffect(() => {
    if(active) {
      technologyRef.current.style.border = "dashed"
    }
  })


	return (
	    <div ref={technologyRef} onClick={() => {setActive(true)}}>
	      <div
	        className='technology'
	      >
	      </div>
	    </div>
  )

初歩的な悩みかも知れませんが、どちらが良いかをちゃんと判断した上で
使用したいので、どうか皆様のご意見を伺えますと幸いです。

0

1Answer

react経験は浅いのですが、これはactiveという状態を設けるかどうかで、言い換えると「activeという状態と要素のスタイルを分けて考えるべきかどうか」だと思います。

①の方法だと「要素をクリックするとスタイルが変わる」と見て取れます。
②の方法では「要素をクリックすると状態が有効になり、状態が有効になると要素のスタイルが変わる」となります。
そして2つの方法のうち「目的に近い方」が最適だと思います。

例えば、actvieという状態を設けることにより、スタイル変更以外の判断を行うことも出来ますし、クリック以外の方法で状態を変更することが可能です。そのような事が必要になるなら②の方法が良いかもしれません。
逆に、そこまでする必要がないと考えるなら①の方法で十分かもしれません。

ちなみに②の方法はuseEffectを使わなくてもよいと思います。

const [active, setActive] = useState(false)

return (
  <div
    style={{ border: active ? 'dashed' : 'none' }}
    onClick={() => {setActive(true)}}
  >
  </div>
)
2Like

Comments

  1. @aono1234

    Questioner

    コメントありがとございます。
    自分が作っているコンポーネントはそのactiveの状態によっていろんな処理をさせたいので、②の方法を使いたいと思います!!
    ありがとうございました!

Your answer might help someone💌