react onClickでprops を渡す

More than 1 year has passed since last update.


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が渡せるようになった


参考にしたサイト

React.jsのEventについて