<h2 id="%E8%83%8C%E6%99%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h2>
<p data-line="2" class="code-line">LINEのInputフォームのように、フォーカスを当てるとニョキッと伸びるフォームをReactで実装してみたかったので色々調べた。</p>
<h2 id="%E8%AA%BF%E3%81%B9%E3%81%9F%E7%B5%90%E6%9E%9C" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E8%AA%BF%E3%81%B9%E3%81%9F%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 調べた結果</h2>
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">
<code>onFocus</code>と<code>onBlur</code>を使えばいけそう</li>
<li data-line="6" class="code-line">
<code>onFocus</code>でフォーカスが当たった時にstateを<code>true</code>にして<code>onBlur</code>で離した時にstateを<code>false</code>にすれば良い</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> 実装</h2>
<p data-line="9" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__79f8a64ff8cdd" src="https://embed.zenn.studio/card#zenn-embedded__79f8a64ff8cdd" data-content="https%3A%2F%2Fcodesandbox.io%2Fs%2Freact-expansion-form-x9193%3Ffile%3D%2Fsrc%2FApp.js" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://codesandbox.io/s/react-expansion-form-x9193?file=/src/App.js" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://codesandbox.io/s/react-expansion-form-x9193?file=/src/App.js</a></p>


Reactでフォーカスを当てる・離すと自動伸縮するフォームを作った

背景

調べた結果

実装

Discussion