在父母的反应16中调用子函数

Question

升级到反应16后，我在null得到console.log(this.child)

我的父组件

import EditReview from './partials/editReview'

class VenueDetails extends Component {
  constructor(props) {
    super(props)
    this.child = React.createRef();
  }
  editButtonClick = () => {
    console.log(this.child)
    this.child.current.onEditClick()
  }
  render() {
    return (
      <div>
        <button className="pull-right" onClick={() => this.editButtonClick(review, i)}>edit</button>
        <div className="place-review-text">
          <EditReview {...this.props}/>
        </div>
      </div>
    )
  }
}

我的孩子组件

class EditReview extends Component {
  onEditClick(review, editIndex) {
    console.log('ppp')
  }

  render() {
    return ()
  }
}

export default EditReview

我需要从父组件调用onEditClick。我试过this但不起作用。

请帮助我

Answer 1

你必须分配ref：

<EditReview {...this.props} ref={this.child} />

此外，您不需要使用内联箭头功能：

onClick={() => this.editButtonClick(review, i)}
// ------^^^^^ not required
// because, you're already using public class method

只需使用：

onClick={this.editButtonClick(review, i)}

像这样定义你的方法：

editButtonClick = (review, index) => { // to access review, i