[React]親コンポーネントで定義したメソッドに子コンポーネントから引数を渡す方法

Question

親コンポーネントで定義したメソッドをpropsでonClick要素として子コンポーネントに渡し、子コンポーネント側で引数を設定したいのですが、どのようにすればよいでしょうか？

下記のようにしてみたのですが、うまくいきませんでした。

class Parent extends React.Component {
  handleClick(val) {
    alert(val);
  }

  render(){
    return(
      <Child onClick={() => this.handleClick()} />
    );
  }
}

class Child extends React.Component {
  render() {
    let val = 'これを反映させたい';
    return() {
      <button onClick={this.props.onClick(val)} />
    }
  }
}

Answer 1

onClick={() => this.handleClick()}として引数を固定してしまっているので、渡しても無意味となってしまいます。

class Parent extends React.Component {
  // 子コンポーネントに引き回した際に、thisが外れるのを防ぐためArrow Functionとする
  handleClick = (val) => {
    alert(val);
  }

  render(){
    // メソッドをそのまま渡す
    return(
      <Child onClick={this.handleClick} />
    );
  }
}

class Child extends React.Component {
  render() {
    let val = 'これを反映させたい';
    return() {
      <button onClick={() => this.props.onClick(val}} />
    }
  }
}

Comments

[indi]

なるほど、ありがとうございます。