0

サイドバーとダッシュボードをレンダリングする単純なアプリ コンポーネントを作成しました。サイドバー内のリンクをクリックすると、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 を使用すると思います)、それも含まれていると助かります。

4

2 に答える 2

0

関数を別の関数内に配置する必要があります。このような：

onClick={()=>this.props.clickHandler("/api/最高/価格")}

そうでない場合、「(...)」でトリガーしているため、レンダリングはマウント時に関数を実行します

于 2018-03-19T21:49:02.850 に答える