リアクション入力状態の管理

前回はuseStateを使用して数値の変更を制御しようとしました.
テキストの値を制御する必要がある場合は、どうすればいいですか?InputSample.jsという名前のファイルを作成し、テキスト入力を受信すると、次の出力コードを作成します.

import React from "react";

function InputSample() {
    const onChange = (e) => {
        console.log(e.target);
    }
    return (
        <div>
            <input onChange={onChange} />
            <button>초기화</button>

            <div>
                <p>값:</p>
                무슨무슨값
            </div>
        </div>
    )
}



export default InputSample;

できたものではありません.入力onChangeのテキスト値は、inputを使用して次のpに出力される.その前にconst onChange = (e) => { console.log(e.target); }これは何ですか.
onChangeは、変化が発生したかどうかを検出します.
このとき、右側のeはSyntheticEventであり、Webブラウザのネイティブイベントを囲むオブジェクトである.e.targetはイベントが発生したDOMを表し、入力にテキストが入力された場合、入力はコンソール値に倍増する.

文字を押すたびに、入力は出力されますが、入力された文字は表示されません.ユーザーが入力したデータを知りたい場合は、e.target.valueを入力します.

次に、前回練習したusState()を使用して、入力した値を「値:」に表示します.

import React, {useState}from "react";

function InputSample() {
  const [text, setText] = useState("")
  const onChange = (e) => {
      setText(e.target.value);
  }

  return (
      <div>
          <input onChange={onChange} value={text} />
          <button>초기화</button>

          <div>
              <p>값:</p>
              {text}
          </div>
      </div>
  )
}


export default InputSample;

useStateを用いて入力テキスト値を制御する関数を確立し、pタグの後に入力テキストを出力するために{text}に変更した.

テキストの初期化は、[初期化](Initialization)をクリックして行うこともできます.

 const onReset = () => {
      setText('')
 }

簡単です.setTextを空白に変更するだけです.
この関数を初期化ボタンのonClickに指定すると、初期化が行われます.

import React, {useState}from "react";

function InputSample() {
    const [text, setText] = useState("")
    const onChange = (e) => {
        setText(e.target.value);
    }

    const onReset = () => {
        setText('')
    }
  
    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>

            <div>
                <p>값:</p>
                {text}
            </div>
        </div>
    )
}



export default InputSample;

＃?

<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>

onchangeの隣にvalue={text}がなければ、なぜ入力ウィンドウのテキストがクリアされないのでしょうか.

Inputに入力した値は、上の結果コードをよく見るとわかりますが、e.target.valueです.したがって、これは{text}とは別のことです.
しかし、inputはonChange={onChange} value={text}と呼ばれているため、valueの値は{text}となり、異常状態で初期化ボタンを押すと{text}の値が空白となり、inputウィンドウのtextも初期化される.