イベントハンドラー内のReactインスタンス(this)にアクセスできません[重複]

220
user3696212 2015-04-12 02:41.

ES6(BabelJSを使用)で単純なコンポーネントを作成していますthis.setStateが、関数が機能していません。

典型的なエラーには、

未定義のプロパティ 'setState'を読み取れません

または

this.setStateは関数ではありません

なぜなのかご存知ですか?コードは次のとおりです。

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

19 answers

253
Alexandre Kirszenberg 2015-04-12 03:09.

this.changeContentpropthis.changeContent.bind(this)として渡される前に、を介してコンポーネントインスタンスにバインドする必要がありますonChange。そうしないthisと、関数の本体の変数はコンポーネントインスタンスではなく、を参照しますwindowFunction :: bindを参照してください。

React.createClassES6クラスの代わりに使用する場合、コンポーネントで定義されたすべての非ライフサイクルメソッドは、コンポーネントインスタンスに自動的にバインドされます。自動バインドを参照してください。

関数をバインドすると、新しい関数が作成されることに注意してください。レンダリングで直接バインドするか、コンポーネントがレンダリングされるたびに新しい関数が作成されるか、コンストラクターでバインドして1回だけ起動することができます。

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

vs

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

参照はコンポーネントインスタンスに設定され、ではなく設定されます。React.refsに変更React.refs.somerefする必要がありますthis.refs.someref。また、sendContentメソッドをコンポーネントインスタンスにバインドして、それがthis参照するようにする必要があります。

104
Kyeotic 2015-12-03 08:15.

Morhausは正しいですが、これはなしで解決できbindます。

クラスプロパティの提案と一緒に矢印関数を使用できます。

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

矢印関数はコンストラクターのスコープで宣言されており、矢印関数は宣言されたスコープthisから維持されるため、すべて機能します。ここでの欠点は、これらがプロトタイプの関数ではなく、すべてのコンポーネントで再作成されることです。ただし、bind同じ結果になるため、これはそれほどマイナス面ではありません。

56
Kaloyan Kosev 2016-12-22 12:11.

この問題は、React.createClass()コンポーネント定義構文からES6クラスの拡張方法に移行するときに私たちのほとんどが最初に経験することの1つですReact.Component

これはthisReact.createClass()vsのコンテキストの違いが原因extends React.Componentです。

を使用React.createClass()すると、thisコンテキスト(値)が自動的に正しくバインドされますが、ES6クラスを使用する場合はそうではありません。ES6の方法で(拡張することによりReact.Component)それを行う場合、thisコンテキストはnullデフォルトです。クラスのプロパティは、Reactクラス(コンポーネント)インスタンスに自動的にバインドされません。


この問題を解決するためのアプローチ

私は全部で4つの一般的なアプローチを知っています。

  1. 関数をクラスコンストラクターにバインドします。多くの人から、JSXにまったく触れず、各コンポーネントの再レンダリングで新しい関数を作成しないベストプラクティスアプローチと見なされています。

    class SomeClass extends React.Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick() {
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick}></button>
        );
      }
    }
    
  2. 関数をインラインでバインドします。このアプローチは、いくつかのチュートリアル/記事などでまだあちこちで使用されているので、それを知っておくことが重要です。これは#1と同じ概念ですが、関数をバインドすると、再レンダリングごとに新しい関数が作成されることに注意してください。

    class SomeClass extends React.Component {
      handleClick() {
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick.bind(this)}></button>
        );
      }
    }
    
  3. 太い矢印関数を使用します。矢印が機能するまで、すべての新しい関数は独自のthis値を定義していました。ただし、矢印関数は独自のthisコンテキストを作成しないためthis、Reactコンポーネントインスタンスの元の意味を持ちます。したがって、次のことができます。

    class SomeClass extends React.Component {
      handleClick() {
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={ () => this.handleClick() }></button>
        );
      }
    }
    

    または

    class SomeClass extends React.Component {
      handleClick = () => {
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={this.handleClick}></button>
        );
      }
    }
    
  4. ユーティリティ関数ライブラリを使用して、関数を自動的にバインドします。そこにいくつかのユーティリティライブラリがあり、それは自動的にあなたのために仕事をします。いくつか言及するだけで、人気のあるもののいくつかを次に示します。

    • Autobind Decoratorthis、メソッドがデタッチされている場合でも、クラスのメソッドをの正しいインスタンスにバインドするNPMパッケージです。パッケージ@autobindbeforeメソッドを使用thisして、コンポーネントのコンテキストへの正しい参照バインドます。

      import autobind from 'autobind-decorator';
      
      class SomeClass extends React.Component {
        @autobind
        handleClick() {
          console.log(this); // the React Component instance
        }
        render() {
          return (
            <button onClick={this.handleClick}></button>
          );
        }
      }
      

      Autobind Decoratorは、アプローチ#1と同様に、コンポーネントクラス内のすべてのメソッドを一度にバインドできるほどスマートです。

    • Class Autobindは、このバインディングの問題を解決するために広く使用されているもう1つのNPMパッケージです。Autobind Decoratorとは異なり、デコレータパターンは使用しませんが、実際には、コンポーネントのメソッドをの正しい参照に自動的にバインドするコンストラクタ内の関数を使用しますthis

      import autobind from 'class-autobind';
      
      class SomeClass extends React.Component {
        constructor() {
          autobind(this);
          // or if you want to bind only only select functions:
          // autobind(this, 'handleClick');
        }
        handleClick() {
          console.log(this); // the React Component instance
        }
        render() {
          return (
            <button onClick={this.handleClick}></button>
          );
        }
      }
      

      PS:他の非常によく似たライブラリはReactAutobindです。


勧告

もし私があなたなら、アプローチ#1に固執するでしょう。ただし、クラスコンストラクターで大量のバインドを取得したらすぐに、アプローチ#4で説明したヘルパーライブラリの1つを調べることをお勧めします。


その他

それはあなたが持っている問題とは関係ありませんが、refを使いすぎはいけません

あなたの最初の傾向は、アプリで「物事を起こさせる」ために参照を使用することかもしれません。この場合は、少し時間を取って、コンポーネント階層のどこで状態を所有する必要があるかについて、より批判的に考えてください。

同様の目的で、必要なものと同じように、制御されたコンポーネントを使用することをお勧めします。コンポーネントのstate使用を検討することをお勧めします。したがって、次のように値に簡単にアクセスできますthis.state.inputContent

8
Andrew Li 2018-08-09 20:01.

以前の回答はソリューションの基本的な概要(つまり、バインディング、矢印関数、これを行うデコレータ)を提供しましたがこれが必要な理由を実際に説明する回答はまだありません。これが私の意見です。混乱を招き、不必要な再バインドや他の人の行動に盲目的に従うなどの不要な手順につながります。

this 動的です

この特定の状況を理解するために、どのようにthis機能するかについて簡単に紹介します。ここで重要なのthisは、ランタイムバインディングであり、現在の実行コンテキストに依存することです。したがって、一般に「コンテキスト」と呼ばれる理由、つまり現在の実行コンテキストに関する情報を提供する理由、およびバインドする必要がある理由は、「コンテキスト」を失うためです。しかし、スニペットで問題を説明しましょう:

const foobar = {
  bar: function () {
    return this.foo;
  },
  foo: 3,
};
console.log(foobar.bar()); // 3, all is good!

この例では3、予想どおり、を取得します。しかし、この例を見てください:

const barFunc = foobar.bar;
console.log(barFunc()); // Uh oh, undefined!

ログが未定義であることに気付くのは予想外かもしれません—どこに3行きましたか?答えは、「コンテキスト」、つまり関数の実行方法にあります。関数の呼び出し方法を比較してください。

// Example 1
foobar.bar();
// Example 2
const barFunc = foobar.bar;
barFunc();

違いに注意してください。最初の例では、barメソッド1が配置されている場所(foobarオブジェクト上)を正確に指定しています。

foobar.bar();
^^^^^^

しかし、2番目の例では、メソッドを新しい変数に格納し、その変数を使用してメソッドを呼び出します。メソッドが実際に存在する場所を明示的に指定しないため、コンテキストが失われます

barFunc(); // Which object is this function coming from?

そしてそこに問題があります。メソッドを変数に格納すると、そのメソッドが配置されている場所(メソッドが実行されているコンテキスト)に関する元の情報が失われます。この情報がないと、実行時にJavaScriptインタープリターが正しくバインドする方法がありません。this特定のコンテキストthisがないと、期待どおりに機能しません2

Reactに関連する

このthis問題に苦しんでいるReactコンポーネント(簡潔にするために短縮)の例を次に示します。

handleClick() {
  this.setState(({ clicks }) => ({ // setState is async, use callback to access previous state
    clicks: clicks + 1, // increase by 1
  }));
}

render() {
  return (
    <button onClick={this.handleClick}>{this.state.clicks}</button>
  );
}

しかし、なぜ、そして前のセクションはこれにどのように関連していますか?これは、同じ問題の抽象化に苦しんでいるためです。Reactがイベントハンドラーをどのように処理するかを見てみましょう。

// Edited to fit answer, React performs other checks internally
// props is the current React component's props, registrationName is the name of the event handle prop, i.e "onClick"
let listener = props[registrationName];
// Later, listener is called

したがって、そうすると、onClick={this.handleClick}メソッドthis.handleClickは最終的に変数listener3に割り当てられます。しかし、問題が発生していることがわかります。に割り当てたthis.handleClickためlistener、どこhandleClickから来ているのかを正確に指定することはできなくなりました。Reactの観点listenerからは、オブジェクト(またはこの場合はReactコンポーネントインスタンス)にアタッチされていない関数です。コンテキストが失われたため、インタープリターは内部でthis使用する値を推測できません。 handleClick

バインディングが機能する理由

インタプリタが決定した場合は、不思議に思われるかもしれないthis、それはように私はハンドラをバインドすることができ、なぜ、実行時に値が、仕事をするの?あなたが使うことができるからであるFunction#bindために保証しthis、実行時に値を。これはthis、関数に内部バインディングプロパティを設定して、次のことを推測しないようにすることで行われますthis

this.handleClick = this.handleClick.bind(this);

この行が実行されると、おそらくコンストラクターで、現在thisがキャプチャされ(Reactコンポーネントインスタンス)、thisから返されるまったく新しい関数の内部バインディングとして設定されますFunction#bind。これによりthis、実行時に計算されるときに、インタープリターは何も推測しようとせず、this指定された値を使用するようになります。

矢印関数のプロパティが機能する理由

矢印関数クラスのプロパティは、現在、トランスパイルに基づいてバベルを介して機能します。

handleClick = () => { /* Can use this just fine here */ }

になる:

constructor() {
  super();
  this.handleClick = () => {}
}

そして、これは、矢印関数がそれ自体のこれをバインドしないという事実のために機能しますがthis、それらを囲むスコープを取ります。この場合、Reactコンポーネントインスタンスを指すconstructor'sthisは、正しいを提供しますthis4


1私は「メソッド」を使用して、オブジェクトにバインドされることになっている関数を参照し、「関数」を使用してオブジェクトにバインドされていない関数を参照します。

2 2番目のスニペットでは、3ではなくundefinedがログに記録されます。これは、特定のコンテキストで判別できない場合、thisデフォルトでグローバル実行コンテキスト(window厳密モードでundefinedない場合など)に設定されるためです。そして、この例でwindow.fooは存在しないため、未定義になります。

3イベントキュー内のイベントがどのように実行されるかについてのうさぎの穴を下るinvokeGuardedCallbackと、リスナーで呼び出されます。

4実際にはもっと複雑です。Reactは内部的Function#applyにリスナーで使用しようとしますが、矢印関数は単にバインドされないため、これは機能しませんthis。つまりthis、矢印関数の内部が実際に評価thisされると、モジュールの現在のコードの各実行コンテキストの各字句環境で解決されます。最終的にthisバインディングを持つように解決される実行コンテキストはコンストラクターです。コンストラクターはthis、現在のReactコンポーネントインスタンスを指し、それが機能できるようにします。

2
Liju Kuriakose 2017-09-13 23:43.

あなたは3つの方法でこれに取り組むことができます

1.次のようにコンストラクター自体にイベント関数をバインドします

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

2.呼び出されたときにバインドする

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent.bind(this)}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

3.矢印関数を使用する

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={()=>this.sendContent()}>Submit</button>
      </div>
    )
  }
}

export default SomeClass
1
Liju Kuriakose 2017-08-21 23:27.

次のように、イベント関数をコンストラクターのコンポーネントにバインドする必要があります。

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

ありがとう

1
Ivan Mjartan 2017-12-15 03:25.

プロパティとして矢印関数を使用することをお勧めします

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

矢印関数を次のように使用しないでください

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

第二のアプローチは、新しい関数を生成しますので、すべてのあなたが後で、パフォーマンスを気にする場合は、あなたができるように使用されているよりも、この手段に小道具の新しいポインタ新しいバージョンを実際に呼び出しをレンダリングReact.PureComponentかにReact.Component あなたがオーバーライドすることができますshouldComponentUpdate(nextPropsを、nextState)小道具が到着したときの浅いチェック

1
azmul hossain 2018-02-06 21:24.

これらの手順に従ってこれを解決できます

sendContent関数を次のように変更します

 sendContent(e) {
    console.log('sending input content '+this.refs.someref.value)
  }

レンダリング機能を

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>
1
Mustkeem K 2018-07-09 21:05.

クラス内の関数のインスタンスを取得するにはbind、関数を使用thisする必要があります。例のように

<button onClick={this.sendContent.bind(this)}>Submit</button>

この方法this.stateは有効なオブジェクトになります。

1
coder 2019-11-23 14:48.

誰かがこの答えに到達する場合は、手動でバインドする必要なしにすべての関数をバインドする方法があります

コンストラクター()内:

for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
    this[member] = this[member].bind(this)
}

または、global.jsxファイルでこの関数を作成します

export function bindAllFunctions({ bindTo: dis }) {
for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(dis))) {
    dis[member] = dis[member].bind(dis)
    }
}

コンストラクター()で次のように呼び出します。

bindAllFunctions({ bindTo: this })
0
Bassam Rubaye 2016-06-26 19:51.

この問題は、コンポーネントのインスタンスのこれにバインドされていないために発生this.changeContentonClick={this.sendContent}ています。

別の解決策があります(コンストラクター()でbind()を使用することに加えて)、周囲のコードと同じ字句スコープを共有し、これを維持するES6の矢印関数を使用するため、render()でコードを次のように変更できます。 be:

render() {
    return (

        <input type="text"
          onChange={ () => this.changeContent() } /> 

        <button onClick={ () => this.sendContent() }>Submit</button>

    )
  }
0
Florent Giraud 2017-04-13 23:36.

関数呼び出しを自分でバインドする必要がない場合は、こんにちは。'class-autobind'を使用して、そのようにインポートできます

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

スーパーコールの前に自動バインドを記述しないでください。機能しません。

0
ZEE 2017-07-06 23:00.

コンストラクター構文でバインドを保持したい場合は、proposal-bind-operatorを使用して、次のようにコードを変換できます。

constructor() {
  this.changeContent = ::this.changeContent;
}

の代わりに :

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

はるかに単純で、bind(this)またはの必要はありませんfatArrow

0
jack.lin 2018-01-11 03:30.

この問題は、イベントハンドラーがコンポーネントに自動バインドしなかったreact15.0の後に発生します。したがって、イベントハンドラーが呼び出されるたびに、これをコンポーネントに手動でバインドする必要があります。


問題を解決する方法はいくつかあります。しかし、どの方法が最適で、その理由を知る必要がありますか?一般に、クラスコンストラクターで関数をバインドするか、矢印関数を使用することをお勧めします。

// method 1: use a arrow function
    class ComponentA extends React.Component {
      eventHandler = () => {
        console.log(this)
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

// method 2: Bind your functions in the class constructor.
    class ComponentA extends React.Component {
      constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

これらの2つのメソッドは、コンポーネントが毎回レンダリングされるときに新しい関数を作成しません。そのため、新しい関数の小道具が変更されたためにChildComponentが再レンダリングされないか、パフォーマンスの問題が発生する可能性があります。

0
Niraj Raskoti 2018-08-14 18:57.

ES6を使用しているため、関数は「this」コンテキストに自動的にバインドされません。関数をコンテキストに手動でバインドする必要があります。

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}
0
Hemadri Dasari 2018-08-18 15:28.

イベントハンドラーで状態または小道具を操作するには、関数をバインドする必要があります

ES5では、イベントハンドラー関数をコンストラクターでのみバインドしますが、レンダリングでは直接バインドしません。レンダリングで直接バインドを行うと、コンポーネントがレンダリングおよび再レンダリングされるたびに新しい関数が作成されます。したがって、常にコンストラクターでバインドする必要があります

this.sendContent = this.sendContent.bind(this)

ES6では、矢印関数を使用します

矢印関数を使用する場合、バインドを行う必要はなく、スコープ関連の問題を回避することもできます。

sendContent = (event) => {

}
0
Ebe 2018-09-23 02:38.

Alexandre Kirszenbergは正しいですが、注意を払うべきもう1つの重要なことは、バインディングをどこに置くかです。私は何日も状況に悩まされてきましたが(おそらく私は初心者なので)、他の人とは異なり、バインド(すでに適用したもの)について知っていたので、なぜまだそれらを持っているのか頭を悩ませることができませんでしたエラー。バインドの順序が間違っていたことがわかりました。

もう1つは、「this.state」内で関数を呼び出していたという事実です。この関数は、たまたまバインドラインより上にあるため、バインドを認識していませんでした。

以下は私が持っていたものです(ちなみにこれは私の初めての投稿ですが、他の場所で解決策を見つけることができなかったので、それは非常に重要だと思いました):

constructor(props){
    super(props);

       productArray=//some array

    this.state={ 
        // Create an Array  which will hold components to be displayed
        proListing:productArray.map(product=>{return(<ProRow dele={this.this.popRow()} prodName={product.name} prodPrice={product.price}/>)})
    }

    this.popRow=this.popRow.bind(this);//This was the Issue, This line //should be kept above "this.state"
0
khizer 2019-05-04 12:25.

解決:

  1. 明示的にバインドせずにbind、メソッド名を使用 して、のコンテキストを維持するファットアロー関数構文()=> {}を使用できます this
import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputContent: 'startValue'
    }
  }

  sendContent = (e) => {
    console.log('sending input content ',this.state.inputContent);
  }

  changeContent = (e) => {
    this.setState({inputContent: e.target.value},()=>{
      console.log('STATE:',this.state);
    })
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" value={this.state.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

その他のソリューション:

  1. 関数をクラスコンストラクターにバインドします。

  2. 中括弧をエスケープするJSXテンプレートで関数をバインドします{} {this.methodName.bind(this)}

0
Eric Tan 2019-06-28 15:22.

bind(this)はこの問題を修正できます。現在、を使用したくない場合は、別の2つの方法を使用してこれを実現できますbind

1)従来の方法として、bind(this)コンストラクターで使用できるため、関数をJSXコールバックとして使用する場合、のコンテキストthisはクラス自体になります。

class App1 extends React.Component {
  constructor(props) {
    super(props);
    // If we comment out the following line,
    // we will get run time error said `this` is undefined.
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(e) {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button</button>
      </div>
    );
  }
}

2)矢印関数を使用してクラスの属性/フィールドとして関数を定義する場合、bind(this)これ以上使用する必要はありません。

class App2 extends React.Component {
  changeColor = e => {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  };
  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button 1</button>
      </div>
    );
  }
}

3)JSXコールバックとして矢印関数を使用する場合は、bind(this)どちらも使用する必要はありません。さらに、パラメータを渡すことができます。よさそうですね。ただし、その欠点はパフォーマンスの問題です。詳細については、ReactJSdocoを参照してください。

class App3 extends React.Component {
  changeColor(e, colorHex) {
    e.currentTarget.style.backgroundColor = colorHex;
    console.log(this.props);
  }
  render() {
    return (
      <div>
        <button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
      </div>
    );
  }
}

そして、これらのコードスニペットをデモするためのCodepenを作成しました。お役に立てば幸いです。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップスのBDM4037UWは、最大4つのフルHD入力を同時に表示できる40インチのウルトラHD曲面LCDモニターであり、マルチプラットフォームゲーマーに最適な大型モニターのようです。そして、それは、2、3の小さな失敗と1つの大きなつまずきがなければ、そうなるでしょう。

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

(写真:Rodin Eckenroth / Getty Images)良いニュースと悪いニュースがあります。前者?FXは本日、ドナルドグローバーがFXプロダクションと独占的な全体的な制作契約を結んだことを発表しました。つまり、グローバーからのより多くの番組がFXや他の場所で行われることを意味します。

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

ライアン・マーフィーのように、毎ターンショーランナーのIDについて多くを学ぶことはめったにありません。その奇妙なことは、特定の瞬間にライアンマーフィーの工芸品について言えることのすべてですが、彼がグリーの特徴を使ってスピンザボトルをプレイしている場合でも、アメリカンホラーストーリーの壁で衝撃画像のスパゲッティを投げている場合でも、それは光ります。

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

自動車のパイオニアでありテスラのCEOであるイーロンマスクは、ツイッターでのテスラの所有者のフィードバックに応えて、今週末に多くの時間を費やしました。フィードバックは建設的であり、すぐにより良い車になる可能性がありますが、フォーラムでは急速に成長している自動車メーカーのカスタマーサービスの問題に焦点を当てています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language