如何从另一个react类组件调用方法

尝试学习react，并且对如何在click时调用另一个组件有点困惑。

我的按钮组件:

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;

my class component:

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>
);
}
};

我基本上只是想让页面的标题增加与每次点击…但我没有得到任何回应

你需要把这个函数作为一个prop传递给子函数，这样子函数就可以在它的props中看到它并调用它。

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>

可以有多种方法来实现这一点。

如果存在父子关系

例如，如果Logincomponent被包装在HeaderComponent下，LoginComponent想要调用HeaderComponent的api。对于作为props部分的传递方法，是上面文章中解释的最佳方法。

如果组件之间没有关系

在这种情况下，你可以使用React的ref特性将HeaderComponent对象引用存储到一些全局变量，然后在任何组件中访问它。

试试下面的代码:

import React from "react";
var header;
export default function App() {
return (
<div>
<Header ref={(h) => { header = h; }}></Header>
<Login></Login>
</div>
);
}

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.addCount = this.addCount.bind(this);
}
addCount() {
this.setState({
count: ++this.state.count
});
}
render() {
return (
<div>
Count : {this.state.count}
</div>
)
}
}
class Login extends React.Component {
constructor(props) {
super(props);
}
login() {
header.addCount();
}
render() {
return (
<div>
<button onClick={this.login}>Login</button>
</div>
);
}
}

相关内容

最新更新

热门标签：