![](/img/trans.png)
[英]How do I pass values from a parent element to a child element in ReactJs?
[英]How do I pass arguments from a child function to a parent reactjs
我创建了一个简单的应用程序组件,该组件呈现了侧栏和仪表板。 在侧边栏中的链接上单击,我要发出AJAX请求并更改仪表板的状态。 我已将点击处理程序功能移至index.js应用程序组件,因此它可以将道具传递到仪表板。
index.js:
import React from "react";
import { NavBar } from "./components/NavBar";
import { NavBarSide} from "./components/NavBarSide";
import { Dashboard} from "./components/Dashboard"
import { render } from "react-dom";
class App extends React.Component {
handleNavClick(url) {
console.log(url)
}
render() {
return (
<div>
<NavBar/>
<div className="container-fluid">
<div className="row">
<Dashboard/>
<NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
</div>
</div>
</div>
)
}
}
render(<App/>, window.document.getElementById("root"));
我的NavBarSide就像这样...
NavBarSide.js:
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
export class NavBarSide extends React.Component {
render() {
return (
<Nav className="col-md-2 d-none d-md-block bg-light sidebar">
<div className="sidebar-sticky">
<ul className="nav flex-column">
<NavItem className="nav-item">
<NavLink className="nav-link" href="#" onClick={this.props.clickHandler("/api/highest/price")}>Highest Price</NavLink>
</NavItem>
</ul>
</div>
</Nav>
);
}
}
代替预期的行为,此功能似乎立即执行。
如果有更好的方法可以做到这一点(我认为使用react-router v4),那么如果将其也包括在内的话将会很有帮助。
export default class NavBarSide extends React.Component {
constructor(props) {
super(props);
// Bind the function only once - on creation
this.onClick = this.onClick.bind(this);
}
onClick() {
this.props.clickHandler("/api/highest/price");
}
render() {
return (
<Nav className="col-md-2 d-none d-md-block bg-light sidebar">
<div className="sidebar-sticky">
<ul className="nav flex-column">
<NavItem className="nav-item">
<NavLink className="nav-link" href="#" onClick={this.onClick}>Highest Price</NavLink>
</NavItem>
</ul>
</div>
</Nav>
);
}
}
您需要将该函数放在另一个内部。 像这样:
的onClick = {()=> this.props.clickHandler( “/ API /最高/价格”)}
否则,渲染将在安装时执行功能,因为您正在使用“(...)”进行触发
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.