reactjs如何从父级访问子组件的方法 [英] How to access method of the child component from parent in reactjs

问题描述

我正在尝试使用 refs 从 reactjs 中的父组件调用子组件.但是当我尝试调用时，它抛出错误说 showModal() 不是函数.

//app.js

 class app extends Component {构造函数(道具){超级(道具)；this.POPUP = React.createRef();}显示模态(){this.POPUP.showModal(true);}使成为() {返回 (<React.Fragment><span><a onClick={() =>this.showModal()}>Show</a></span><POPUP onRef={ref =>(this.POPUP = ref)}></POPUP></React.Fragment >)}}

popup.js

 class POPUP extends Component {显示模式(显示){console.log('showmodal');}使成为() {控制台日志(this.props.showModalPopup)；<React.Fragment><模态位置=中心"><div>//代码

</模态></React.Fragment>)}}

nextjs 有什么替代方法请帮忙

解决方案

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

首先，如果你想访问 POPUP 实例，你应该这样做

this.POPUP.current.showModal(true);

顺便说一句，如果您打算更改其状态，您的 showModal 函数需要绑定到子组件.

然而，即使这是可行的 - 这通常不是执行 React 的推荐方式.

如果您希望父组件决定 showModalPopup 是否为 true，您可能应该将状态保留在父组件中:

 class App extends Component {构造函数(道具){超级(道具)；this.state = { showModalPopup: false };this.showModal = this.showModal.bind(this);}显示模态(){this.setState({ showModalPopup: true });}使成为() {返回 (<React.Fragment><span><a onClick={this.showModal}>Show</a></span><POPUP show={this.state.showModalPopup}></POPUP></React.Fragment >)}}

const POPUP = ({ show }) =>(<Modal show={show} position="center">//你的内容.</模态>)

I'm trying to call child component from parent component in reactjs using refs.but it throws error saying showModal() is not a function when I tried to call.

//app.js

 class app extends Component {
      constructor(props) {
         super(props);

         this.POPUP = React.createRef();
      }
      showModal(){
            this.POPUP.showModal(true);
      }
      render() {
         return (
             <React.Fragment>
                <span><a onClick={() => this.showModal()}>Show</a></span>

                <POPUP onRef={ref => (this.POPUP = ref)}></POPUP>
             </React.Fragment >
       )
     }
 }

popup.js

 class POPUP extends Component {
   showModal(show) {
         console.log('showmodal');

     }
   render() {
          console.log(this.props.showModalPopup);
       <React.Fragment>
             <Modal

                 position="center">
                 <div>
                     //code
                 </div>
             </Modal>
       </React.Fragment>
       )
     }
 }

Is there any alternative in nextjs.please help

解决方案

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

First of all if you want to access that POPUP instance you should do

this.POPUP.current.showModal(true);

BTW Your showModal function needs to be bound to the child component if you intend to alter its state.

However, even this is doable - this is usually not the recommended way of doing React.

If you want the parent to decide if showModalPopup should be true, you probably should keep the state inside of your parent component:

 class App extends Component {
      constructor(props) {
         super(props);

         this.state = { showModalPopup: false };

         this.showModal = this.showModal.bind(this);
      }
      showModal(){
            this.setState({ showModalPopup: true });
      }
      render() {
         return (
             <React.Fragment>
                <span><a onClick={this.showModal}>Show</a></span>

                <POPUP show={this.state.showModalPopup}></POPUP>
             </React.Fragment >
       )
     }
 }

const POPUP = ({ show }) => (
    <Modal show={show} position="center">
      // your content.
    </Modal>
)

这篇关于reactjs如何从父级访问子组件的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！