react onClickでprops を渡す

#react onClickでprops を渡す

reactのonClickはチュートリアルなどでよく見かけるbindを使わなくてもイベントを取ってこれる

Link

const click =(e)=> {
    e.preventDefault();
    console.log(e);
}
class Link extends Component {
  render(){
    return (
        <li>
          <a href="" onClick={click}>aaa</a>
        </li>
    )
  }
}

でもこの下の書き方みたいに引数にpropsを渡したい時にエラーが出ちゃう

Link

//ダメなパターン
const click =(e,props)=> {
    e.preventDefault();
    console.log(e,props);
}

class Link extends Component {
  render(){
    return (
        <li>
          <a href="" onClick={click(e,this.props)}>aaa</a>
        </li>
    )
  }
}

なのでここはあえてbindを使う精神 2017/02/17 修正
コメントでの指摘にもあるようにarrow function でのthisは良くないので修正しました

Link

const click =(e,props)=> {
    e.preventDefault();
    console.log(props,e);
}

class Link extends Component {
  render(){
    return (
        <li>
          <a href="" onClick={e => click(e,this.props)}>aaa</a>
        </li>
    )
  }
}

これでイベントとpropsが渡せるようになった

追記

正確にいうと上記の書き方も正しくない
過去の自分の記事を振り返ってなぜ、clickに即時関数を使ったのかと言われると「今風」だからとしか返せないと思う
即時関数ということはclick処理が発生するたびに関数が生成するのでパフォーマンス的によろしくない

なので、チュートリアルにある通りbindしてthisを束縛するやりかたか
関数を指定するべき
アロー関数が悪いのではなく、clickイベント内でアロー関数を無名関数で実行しているのが悪い

参考にしたサイト

React.jsのEventについて