使用 ref 从另一个组件调用组件方法

Question

我试图在用户单击 App 组件中的 <button> 时调用我的 Modal 组件的 show 方法，但它没有工作。

我使用 ref 从 App 组件访问 Modal 组件。

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.show = this.show.bind(this);
  }

  show() {
    console.log('show');
  }

  render() {
    return (
      <div>...</div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.modalRef = React.createRef();
  }

  render() {
    return (
      <div>
        <Modal ref={this.modalRef}/>

        <button id="myBtn" onClick={ this.modalRef.show }>
          Call show modal method
        </button>
      </div>
    );
  }
}

Answer 1

您通常会传递一个 prop 而不是直接在组件上调用方法：

const Modal = ({
  isVisible,
}) => {   
  useEffect(() => {
    console.log(`The modal has been ${ isVisible ? 'opened' : 'closed' }.`);
  }, [isVisible]);

  return (
    <div className={ cx({ ['isVisible']: isVisible }) }>...</div>
  );
}

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleButtonClick = useCallback(() => {
    // Toggle the `isModalVisible` value:
    setIsModalVisible(prevIsModalVisible => !prevIsModalVisible);
  }, []);

  return (
    <div>
      <Modal isVisible={ isModalVisible } />

      <button onClick={ handleButtonClick }>
        { isModalVisible ? 'Close' : 'Open'} Modal
      </button>
    </div>
  )
};

Answer 2

我尝试了常规 ref 方法，它似乎适用于所有现有代码

class Modal extends React.Component {
  show = () => {
    console.log("show");
  };

  render() {
    return <div />;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Modal ref={ref => (this._modal = ref)} />
        <button id="myBtn" onClick={() => this._modal.show()}>
          call show modal method
        </button>
      </div>
    );
  }
}

演示 Link：https://codesandbox.io/s/react-example-z893s?file=/index.js:77-461

如果有帮助请告诉我！

使用 ref 从另一个组件调用组件方法

Call a component method from another component with ref

modal-dialog

event-handling

reactjs

react-props

react-ref