Question

我创建了一个简单的应用程序组件，用于呈现侧栏和仪表板。在边栏上单击链接，我想要执行AJAX请求并更改仪表板的状态。我已将click处理函数移动到index.js应用程序组件，因此它可以将props传递到仪表板。

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），如果还包括它，将会有所帮助。

Answer 1

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

Answer 2

您需要将该功能放在另一个内部。像这样：

的onClick = {（）=＆GT; this.props.clickHandler（＆＃34; / API /最高/价格＆＃34;）}

如果不是渲染将执行mount上的函数，因为你正在使用＆＃34;（...）＆＃34;

如何将参数从子函数传递给父反应器

2 个答案: