javascript – 响应调用子组件中的函数

前端之家收集整理的这篇文章主要介绍了javascript – 响应调用子组件中的函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图从父组件中调用存储在子组件中的函数.但不确定要这样做.我知道如果是父母的形式孩子我可以简单地使用组件道具但不知道如何从父母到孩子.

正如您在下面的示例中看到的那样,父类中的按钮需要触发子类中的显示功能.

  1. var Parent = React.createClass ({
  2. render() {
  3. <Button onClick={child.display} ?>
  4. }
  5. })
  6.  
  7.  
  8. var Child = React.createClass ({
  9. getInitialState () {
  10. return {
  11. display: true
  12. };
  13. },display: function(){
  14. this.setState({
  15. display: !this.state.display
  16. })
  17. },render() {
  18. {this.state.display}
  19. }
  20. })

解决方法

实现这一目标的最简单方法是使用refs.
  1. var Parent = React.createClass ({
  2.  
  3. triggerChildDisplay: function() {
  4. this.refs.child.display();
  5. },render() {
  6. <Button onClick={this.triggerChildDisplay} />
  7. }
  8. })
  9.  
  10.  
  11. var Child = React.createClass ({
  12. getInitialState () {
  13. return {
  14. display: true
  15. };
  16. },render() {
  17. {this.state.display}
  18. }
  19. })

我基本上复制了你的例子,但请注意,在你的Parent中,我没有看到你渲染一个Child组件,但通常,你会,并且在那个Child上你会给它一个ref,比如< Child ref =“孩子“/>.

猜你在找的JavaScript相关文章