时间戳

首页 > 解决方案 > 你如何从另一个反应类组件调用方法

reactjs - 你如何从另一个反应类组件调用方法

问题描述

试图学习反应，有点困惑如何在点击时调用另一个组件..

我的按钮组件：

import React from 'react';
import Header from '.././Header.js'

class Login extends React.Component {
    render() {
        return (
            <div className='Login'>
            <button id='login' onClick={ Header.incrementCount }>increment</button>
            </div>
        );
    };
}
export default Login;

我的班级组件：

import React from 'react';
import Head from 'next/head'

export default class Header extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        count: 1,
      };
    }
    incrementCount = () => {
      this.setState({
        count:  this.state.count + 1
      });

    };
    render() {
      return (
        <Head>
        <title>/{this.state.count}</title>
        </Head>
      );
    }
};

我基本上只是想让页面的标题随着每次点击而增加......但我没有得到回应

标签： reactjs

解决方案

您需要将该函数作为道具向下传递给孩子，以便孩子可以在其道具中看到它并调用它。

class Login extends React.Component {
    render() {
        return (
            <div className='Login'>
            <button id='login' onClick={ this.props.incrementCount }>increment</button>
            </div>
        );
    };
}
class Header extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        count: 1,
      };
    }
    incrementCount = () => {
      this.setState({
        count:  this.state.count + 1
      });

    };
    render() {
      return (
        <div>
          <Login incrementCount={this.incrementCount} />
          <h3>/{this.state.count}</h3>
        </div>
      );
    }
};

ReactDOM.render(<Header />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

推荐阅读