1：イベントとネイティブイベントタイプは、+イベント名にonClickなどの頭文字を使用して中国風に反応します
図に示すように、今後頻繁に使用されるイベントのみがプロンプト表示されます
2：Content.jsで一連のボタンを作成して、イベントについて学習します
2.1通常の関数バインディング
<button onClick={
function(){
alert('6666')}}>按钮1</button>
2.2矢印関数のバインド
<button onClick={
()=>{
alert("7777");
}}>按钮2</button>
2.3パラメータ付きの矢印関数
<button onClick={
(e)=>{
e.target.style.color="red";
}}>按钮3</button>
2.4
ページセクション
<button onClick={
this.show
}>按钮4</button>
レンダリングの上に関数を定義します。詳細については、アラートのプロンプトを参照してください。
constructor(props){
super(props);
this.state={
num:10
}
//this.show9 = this.show9.bind(this);
}
show(){
alert("按钮4被点击 但是里面this会脱离上下文关系");
alert(this.state.num);//报错 this是undefined
}
2.5矢印関数を使用してこの点を強化します。これがオブジェクトです。
<button onClick={
//show5是不能带参数
this.show5
}>按钮5</button>
関数の定義
show5=()=>{
alert(this.state.num);
}
2.6関数はパラメータを受け取ることができます
<button onClick={
//show6能带参数
()=>{
this.show6("66666")
}
}>按钮6</button>
関数の定義
show6=(content)=>{
alert(content);
}
2.7関数はパラメータを受け取り、トリガーされたイベントのソースを返すことができます
<button onClick={
//show7能带参数 还能带事件源
(e)=>{
this.show7("7777",e);
}
}>按钮7</button>
関数の定義
show7=(content,e)=>{
e.target.innerHTML= content;
}
2.8バインドを使用してこの方向性を強化します
<button onClick={
this.show8.bind(this)}>按钮8</button>
函数的定义
show8(){
alert(this.state.num);
}
2.9バインドするポイントを強化する状態でバインドを使用するのは、関数が実行されるときのポイントです。
<button onClick={this.show9} >按钮9</button>
show9の関数定義は、このオブジェクトが誰であるかを参照します
constructor(props){
super(props);
this.state={
num:10
}
this.show9 = this.show9.bind(this);
}
show9(){
alert(this.state.num);