在 React 16 中从父级调用子函数

Question

升级到反应16后，我nullconsole.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。我试过这个，但没有用。

请帮助我

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