Inputにテキストを入力すると、本明細書のdivとして作成されます。

第1週-JavaScriptベース(1)講義ではこの機能を実現しており、この授業ではRefを用いて反応元素を導入する.JavaScriptでは実際のドームを修正する方法ですが、反応要素に追加されたinputは仮想ドーム内で発生する操作なのでエラーが発生します.

1.クラス構成部品-REact。createRef()

App.js

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["Eternals", "First Cow", "Seberg", "French Dispatch"],
    };

    this.text = React.createRef();
  }

  render() {
    return (
      <div className="App">
        <Container>
            <Title>개봉예정작</Title>
            <Line/>
            <BucketList list={this.state.list}/>
        </Container>

        <div>
          <input type="text" ref={this.text}/>  
        </div>
      </div>
    );
  }
}

➊ <input type="text"/>テキストをインポートするため、renderに入力を生成します.
➋ this.text = React.createRef(); constructor内報RefRefは「ラベル」のような概念です.
➌ <input type="text" ref={this.text}/>・67914・➊で宣言したRefを適用します.
<input type="text"/>中componentDidMount()で確認すれば、現在入力されていることが確認できます.このように、反応器において、Refが生成されると、コンソール出力時のconsole.log(this.text);と表示される.
今回の講義はinputのvalueを導入し、再印刷はcurrent:(Ref로 달아준 돔 요소)この状態では、inputにテキストが入力されてもコンソールウィンドウから何も出力されません.console.log(this.text.current.value);に書いてあるので.
ただし、componentDidMount()で撮影すると、未キャプチャタイプエラー:Cannot read properties of null(reading'value')と呼ばれるエラーが発生します.renderを空とするため.これは最終的に仮想ドームと真ドームの問題であり,仮想ドームのRender処理中に要素を作成する際に真ドームに対応する要素がないため,このエラーが発生した.
そのため、valueを確認するには、他の方法が必要です.

onChange

        <div>
          <input type="text" ref={this.text}
          onChange={() => {
            console.log(this.text.current.value);
          }}/>  
        </div>

Inputの属性の1つはthis.text.currentinputの入力値が変化した場合に呼び出されるonChangeの関数です.つまり,入力なしでは関数は実行されない.したがって、onChangeが入力されても、コンソールウィンドウの実行中にエラーは発生しません.
inputにテキストを入力すると、関数が呼び出されるとrender-comonentDid-Mount処理が完了するので、ドーム要素を見つけることができます.renderに属する矢印関数を実行する場合、onChangeに既にinputがあるのでエラーは発生しません.

2.関数要素-反応。useRef()

BucketList.js

const BucketList = ({ list }) => {
    const my_lists = list;
    const my_wrap = React.useRef(null);

    console.log(my_wrap);
   
    return (
        <div ref={my_wrap}>
	.
    	.
        .
    );
}

➊ this.text.currentクラス構成部品と同様に、Refをどの要素に追加するかを決定する静音変数が生成されます.関数型構成部品ではライフサイクルメソッドは使用できません.すなわち、const my_wrap = React.useRef(null);内では初期化操作ができないため、「復旧作業」となる.useref()を使用します.パラメータに渡されたconstructorは初期化可能な値です.
➋ (null)、、、、、、に、➊で宣言した変数を加えます.
➌ <div ref={my_wrap}>コンソールウィンドウで確認すると、・𐥊𐥊4.その他の値を➊から渡される初期値に設定すると、その値としてマークされます.returnエー<div>ではなくconsole.log(my_wrap);出てきた原因は{current: null}その前に、作っておきましたcurrent確認するにはdivちょっとした手口が必要です.

window.setTimeout

    window.setTimeout(() => {
        console.log(my_wrap);
    }, 1000);

(null)2番目のパラメータと同じ時間(ミリ秒単位)が経過した後、1番目のパラメータの関数を実行します.
上のコードを1秒に設定して実行return1秒以内に仮想ドームがconsole.log(my_wrap);真ドームに1つの要素を送信するので、コンソールウィンドウで見ることができますdiv