【書籍で勉強中】React.jsのコードの意味が分からない

#コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
  <h1>React</h1>
  <div id="root">wait...</div>

  <script type="text/babel">
    let dom = document.querySelector('#root');
    
    
    const p = {
        fontSize: "20pt",
        padding: "10px",
    };
    const input = {
        fontSize: "16pt",
        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>
</html>

#分からない点

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

上記の、「event.target.value」がどうしてこのコードになるのかが分からないです。
どうかご教授ください。

行動規範の内容に同意します

回答1件

Reactでも、イベントコールバックにはEventオブジェクトが渡されます（厳密にはブラウザネイティブのEventオブジェクトと違いますが、イベントハンドラで同期的に使う分には同じです）。

このEventオブジェクトにはプロパティやメソッドがいくつかありますが、.targetがイベントの発生したDOM要素を指すようになっています（MDN）。ということで、event.targetはこのイベントをセットした<input>を指すことになります。

そして、<input>へ入力された値は.valueで取れます。

投稿2019/06/29 05:47

maisumakun

総合スコア145183

mariobaske

2019/06/29 06:44

ありがとうございます。 DOMやMDNの勉強をもっとして理解度を上げていきます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【書籍で勉強中】React.jsのコードの意味が分からない

関連した質問