Reactの勉強。Reactを使いinput要素のテキストボックスに記入した文字をパラグラフに表示できるようにしてみました。

import React, { useState } from 'react';
function Input{
 const [text, setText] = useState('');
 const onChange = (e) =>{
  setText(e.target.value);
 }
 return(
 <div>
 <input type="text" id="text" name="text" onChange={onChange} />
 <p>あなたの名前は、<strong>{text}</strong>です</p>
 </div>
 )
}
export default Input;

inputのonChangeイベントでStateを更新することで入力した内容が即時反映できます。

応用：入力した内容を配列にしてリストタグに追加する

先程のコードにボタン要素を追加し、ボタンを押下したら入力内容が1行ずつリストで追加されるようにしました。

import React, { useState } from 'react';
const Input = () => {
 const [text, setText] = useState('');
 const [list,setList] = useState(['りんご','ごりら']); //配列で指定
 const onChange = (e) =>{
  setText(e.target.value);
 }
 const onClick = () =>{
  setList([...list,text]); //配列に追加する
  setText(''); //入力フォームを空欄に
 }
 return(
 <div>
  <input type="text" id="text" name="text" onChange={onChange} />
  <button onClick={onClick}>追加</button>
  <ul>
  { list.map( text => {
   return (
    <li>{text}</li>
   );
  })}
  </ul>
 </div>
 )
}
export default Input;

onClickのメソッドでリスト配列を更新し、ついでにテキストボックスを空っぽにします。

りんご、ごりら、らっぱ、ぱせり、りんご、ごりら、らっぱ、ぱｓ…一旦止めます。

おしまい♥

タグ：React