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

您必须分配参考：

<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

在反应16中从父级调用子级函数

1 个答案: