[TIL]21.05.15


今日学んだ(生活コード反応編を参照)


  • イベントでステータスを変更する方法
  • :setStateを使用して、stateをusStateで初期化するか、propsをコンストラクション関数で初期化し、stateを初期化します.setStateはステータス更新関数です.

  • イベントにはeという名前のオブジェクトがあり、preventDefault()という関数が含まれています.
    e.preventDefalut();
    このように使うと、ラベルの基本的な動作方法が禁止されます.たとえば、<a>タグを使用すると、<a href="/">{alert(‘Hello World’)}</a>のようなalert関数が追加され、alert関数が実行されるとhrefプロパティによってページが再ロードされます.それを防ぐためにPreventDefault()を使用します.(他の目的を覚えていたらブログを書き直します…)

  • イベントでステータス値を変更する場合は、次のようにイベント関数の末尾にbindという関数を使用します.イベントでthisを使用する場合、bindを使用しない場合、thisは何も指示しません.だから.
      // 컴포넌트를 사용할때에 props로 함수를 받고, 그 함수를 컴포넌트 내부로직에 있는 
      // onClick과 onChange와 같은 이벤트함수 안에 넣어주면 이벤트가 실행될 때
      // 다음과 같이 props로 받은 함수도 같이 실행되어 이벤트를 만든 것처럼 구현할 수 있다.
     <Subject
    			title={this.state.subject.title},
    			sub={this.state.subject.sub}
    			onChangePage = function(){
    				this.setState(mode: ‘welcome’);
    			}.bind(this);
    >```	
       
    ```js    
    
    import React, { Component } from ‘react’;
    class Subject extends Component {
    	render(){
    		return{
    			<header>
    				<h1><a href=/” onClick={function(e){
    					e.preventDefault();
    					this.props.onChangePage();
    				}.bind(this)}>{this.props.title}</a></h1>
    				{this.props.sub};
    		}
    	}
    }
    export default Subject;
    上のonChangePageというイベントは自分で勝手にやっています.つまり、自分が望むアクティビティを作成するために直接アクティビティを作成することができます.
    正確には道具です関数はこのように作成され、イベント属性をコンポーネントのタグに配置し、関数を属性値として関数の属性値thisに戻します.props.onChangePageは、propsが持つ関数を加えることで、元のonClickというイベントを実行する際に関数を実行することで、イベントを実行するような機能を実現しています.

  • 構成部品では、thisは構成部品自体を示します.(オブジェクト形式)
  • bind関数を別の状態に入力すると、他の要素で動的に使用できます.
  • 明日やること
  • 生活符号化反応イベントを理解した後、
  • を記録する.
  • 生活コードREACT CRUD教程を観覧し、再度クローンコードを行い、その後REACT CRUD関連ブログ
  • を行う.
    REACT CRUDを
  • 項目に適用し、
  • を記録する.