[TIL]21.05.15
今日学んだ(生活コード反応編を参照)
イベントでステータスを変更する方法
イベントには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は構成部品自体を示します.(オブジェクト形式)
REACT CRUDを
Reference
この問題について([TIL]21.05.15), 我々は、より多くの情報をここで見つけました https://velog.io/@juho00ng/TIL21.05.16テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol