访问从路由器传递到表格的孩子的值

路线：

<Route path="/login" component="Login"> 
    <Route path="/login/lender" component="LenderLogin"/> 
    <Route path="/login/customer" component="CustomerLogin"/> 
</Route>

渲染内登录：

<div> 
    <form> 
    {/*All my common inputs*/} 
    {/*Link to Customer and Lender*/} 

    {this.props.children} 
    <input type="submit"/> 
    </form> 
</div>

CustomerLogin和LenderLogin里面有他们自己的投入。在提交表格时，如何将LenderLogin或CustomerLogin数据输入Login？

来源

2017-01-02 Rahul.A.Krishna

您使用哪种机制来保留表单值？（你标记了'redux'，所以我假设你保持一个中央状态？） –

有2个解决方案。

在反应中，您可以使用道具来传递数据/回调。（GOOD）您可以将回调传递给儿童组件，这些儿童组件可在儿童更改数据时调用。

对于更多的细节。 http://andrewhfarmer.com/component-communication/
使用ref（BAD）将属性ref =“customerComponent”分配给您的客户，然后将ref =“lenderComponent”分配给另一个。然后可以在那些返回值的组件中定义方法。当需要时，您可以调用customComponent.getMyValue（）中的方法来获取值。
https://facebook.github.io/react/docs/refs-and-the-dom.html

来源

2017-01-02 13:01:18 user3770494

也许，你应该使用一个零件形状这里面。例如：

my_component.js

import FormComponent from './form_component'; 

class MyComponent extends React { 
    render() { 
    return(
     <div> 
     <FormComponent data={this.state.data} /> 
     </div> 
    ); 
    } 
} 

export default MyComponent;

form_component.js

const FormComponent = ({data}) => { 
    return(
    <div> 
     <form> 
     ... 
     </form> 
    </div> 
); 
} 

export default FormComponent;

但是，如果你喜欢用孩子，你可以使用IndexRoute

import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

<Route path="/login/lender" component="LenderLogin"> 
    <IndexRoute component={FormComponent)} /> 
<Route>

来源

2017-01-02 13:42:56

如果你正在使用像Redux的状态管理器，您应该存储从您的LenderLogin或CustomerLogin有数据（通过调度事件），然后Login组件内检索它（与react-redux库connect()方法。

来源

2017-01-02 13:51:35 Luger

访问从路由器传递到表格的孩子的值

回答

相关问题