はReactjs

Question

でパラメータを持つコンストラクタで機能をバインドする方法

だからここに私の機能です

constructor() 
{ 
    this.remove = this.remove.bind(this); 
} 
render() 
{ 
    return (
     <div> 
      { this.state.search.map((item, index) => 
       ( 
        <button key={index} onClick={this.remove(item)}>{item.search}: {item.text}</button> 
       )) 
      } 
      </div> 
     </div> 
    ); 
} 

コンストラクタからバインディングを削除しても問題ない場合は、これをボタンラインに変更してください。

<button key={index} onClick={this.remove.bind(this, item)}>{item.search}: {item.text}</button> 

私の質問は、コンストラクタにバインドしてパラメータを取る方法があるかどうかです。

Answer 1

this.remove(item)とthis.remove.bind(this, item)の違いは、最初のが関数を呼び出し、2番目が新しい関数を作成するということです。あなたがthis.remove.bind(this, item)とを使用することができます

So my question is, is there a way to bind it in the constructor so that it can take on the parameter?

それは不要ですが、結合のコンストラクタを実行します。

あなたはイベントハンドラにitemを渡したい場合は、あなたの現在の設定で、itemにアクセスすることができます.mapで新しい関数を作成する必要が。これは、.bindまたはクロージャを介して行うことができます。いずれの場合でも、コンストラクタ内のバインディングは単に必要ではありません。

itemを別の方法で指定すると、新しい関数の作成を避けることができます。

function Button({item, onClick}) { 
    return <button onClick={() => onClick(item)}>{item.search}: {item.text}</button>; 
} 

class Component extends React.Component { 
    constructor() 
    { 
     this.remove = this.remove.bind(this); 
    } 

    render() 
    { 
     return (
      <div> 
       { this.state.search.map((item, index) => 
        ( 
         <Button key={index} onClick={this.remove} item={item} /> 
       )) 
       } 
       </div> 
      </div> 
    ); 
    } 
}