Question

我想在reactjs的下一页状态中传递外键ID的值。这是我第一页的当前状态。

constructor(props,context) {
        super(props,context);


        this.state = {
            apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
            categoryName: " ",
            subCategoryName:" ",
            squareFeet:" ",
            leadServeyId:" ",
};
        this.saveValue = this.saveValue.bind(this);
        this.savedValue= this.savedValue.bind(this);
        this.handleChange = this.handleChange.bind(this);
}

我在第一页的后端中得到了这个值。

id:39ce4374-a79c-470a-b95f-befd046eb654
{'categoryName': 'Commercial', 'subCategoryName': 'Restaurant', 'squareFeet': 2371, 'leadServeyId': ' '}

我想要的是在下一页中将此ID作为外键传递，合并值并更新下一页的状态。这是第二页状态：

constructor(props) {
        super(props);
        this.state = {
            apiUrl:config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
            FreeEstimateName :"",
            FreeEstimateEmail :"",
            FreeEstimateMobile :"",
            leadServeyId:this.props.leadParamId,
};

        this.handleFreeEstimateName = this.handleFreeEstimateName.bind(this);
        this.handleFreeEstimateEmail = this.handleFreeEstimateEmail.bind(this);
        this.handleFreeEstimateMobile= this.handleFreeEstimateMobile.bind(this);
}

我尝试使用这样的路由。但是它不起作用：

 handleClick = () => {
        Router.push({
            pathname: '/pagename',
            query: { leadParamId: this.props.leadServeyid },
        },{ shallow: true })
    }

static getInitialProps ({ query: { leadParamId} }) {
        console.log('getInitialProps colling ...');
        return { leadParamId: leadParamId}
    }

我如何使其工作？

Answer 1

以下是有关如何使用React Router将参数发送到另一个组件的示例。

您已经定义了以下路线：

<Switch>
  <Route path="/create" exact render={() => <Create/> }/>
  <Route path="/my-list" exact render={() => <List users ={ users }/> }/>
  <Route path="/login" exact render={() => <Login/> }/>
  <Route path="/" exact render={() => <Home/> }/>
  <Route render={() => <Error404/> }/>
</Switch>

然后，您将拥有一个导航栏组件，其中包含指向这些路线的所有链接：

import { Navbar, Nav } from 'react-bootstrap';
import { NavLink, withRouter } from 'react-router-dom';

const navbar = (props) => {

    const navigateToCreate = () => {
        props.history.push('/create', { id: 7, color: 'green' });
    }

    return (
        <div>
            <Navbar bg="light" expand="lg">
                <NavLink className="navbar-brand" to="/">Authentication</NavLink>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <NavLink className="nav-link" to="/create" exact>Create</NavLink>
                        <NavLink className="nav-link" to="/my-list" exact>My List</NavLink>
                        <NavLink className="nav-link" to="/login" exact>Login</NavLink>
                        **<button onClick = { navigateToCreate }></button>**
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    );
};

export default withRouter(navbar);

有一个按钮，该按钮将通过执行功能NavigationToCreate（）以编程方式导航到创建组件。不要忘记从react-router-dom导入withRouter对象，以访问通过react-router传递的所有道具（例如：历史，位置，参数等。）。

在导航至 create 组件的同时，我们传递了一个对象{id：7，color：'green'}。（您的问题：通过react-router将属性传递到另一个组件。）

最后一步：通过 create 组件接收道具。

创建组件如下所示：

import { withRouter } from 'react-router-dom';

const create = (props) => {
    //here you access all the params sent from navbar component
    console.log(props.history.location.state);
    //result: {id: 7, color: "green"}
    return (
        <div>
            <p>CREATE</p>
        </div>
    );
};

export default withRouter(create);

再次：为了访问由react-router提供的所有属性您应该使用从导入的withRouter对象包装组件 “ react-router-dom”。

在下一页状态中传递外键ID

1 个答案: