矢印を使用せずにイベントを使用して反応する - onclick機能

Question

私は家に帰るためのリンクを持っており、そこには配列からアイテムを削除するボタンがあります。リンクがホーム画面にリダイレクトするのを防ぎ、配列から項目を削除するには、ev.preventDefault()を使用する必要があります。

renderメソッドの矢印機能を使用せずにevを反応メソッドに渡すことはできますか？私の研究と具体的にはthe answer hereから、以下のことがそうする唯一の方法であるようです。

私は、矢印機能が毎回再レンダリングを引き起こすことに懸念しています。新しい機能が各レンダリングで作成されるためです。

removeItem(label, e) { 
    e.preventDefault(); 
    this.props.removeItem(label.id); 
} 


render() { 
    const { label } = this.props; 
    return (
     <Link to'/'> 
     <span>Go Home</span> 
     <span onClick={(e) => this.removeItem(label, e) }> Click me <span> 
     </Link> 
    ); 
} 

Answer 1

です。このようなあなたのアプリをリファクタリング：

removeItem(ev) { 
    ev.preventDefault(); 
    this.props.removeItem(this.props.label.id); 
} 


render() { 
    const { label } = this.props; 
    return (
     <Link to'/'> 
     <span>Go Home</span> 
     <span onClick={this.removeItem}> Click me <span> 
     </Link> 
    ); 
} 

この方法は、自動的にあなたのremoveItem方法にクリックイベントを渡します反応します。

すべてのレンダリングで新しい関数を作成することは、おそらくそれほど高価ではないと言わざるを得ないが、

Answer 2

関数を再作成しないように、クラスの小道具にパラメータを抽出することができます。ここにいくつかありますexamples

たとえば、これは常に新しい機能を作成します。

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}> 
      ... 
      </li> 
     )} 
     </ul> 
    ); 
    } 
}); 

ここでは、再レンダリング時に関数を再作成しません。

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} /> 
     )} 
     </ul> 
    ); 
    } 
}); 

var ListItem = React.createClass({ 
    render() { 
    return (
     <li onClick={this._onClick}> 
     ... 
     </li> 
    ); 
    }, 
    _onClick() { 
    this.props.onItemClick(this.props.item.id); 
    } 
}); 

は、ここであなただけのラベルパラメータを削除し、直接this.propsからラベルを得ることができるいくつかのSOの説明React js onClick can't pass value to method