フォームの設定「reactメモ」 #React

reactを今日から初めていく、メモとして覚えた知識をここに残す。

・フォームの設定
入れた値を表示させる

react_app

 <body>
    <h1>React</h1>
    <div id="root">wait.......</div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    const p = {
     fontSize: "20px",
     padding: "10px",
     };

    const input = {
     fontSize: "16px",
     padding: "5px 10px",
    }

  let message= 'お名前をどうぞ：';
  let in_val = '';


   let doChange = (event)=>{
     in_val = event.target.value ;
     message = 'こんにちは、' + in_val + 'さん！！！';
   };

    let doAction = (event)=>{

      let el = (
        <div>
          <p style={p}>{message}</p>
            <div>
              <input type="text" id="input" style={input}
              onChange={doChange} />
              <button onClick={doAction} style={input}>
                Click
                </button>
              </div>
          </div>

      );
      ReactDOM.render(el, dom);
    };
    doAction();


    </script>

  </body>