Question

我的代码的重要部分看起来像。

路线：

<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？

Answer 1

有两种解决方案。

在反应过程中，您可以使用道具来传递数据/回调。（好）您可以将回调传递给可在数据时调用的子组件在孩子的变化中。

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

Answer 2

也许，你应该在里面使用一个组件Form。例如：

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>

Answer 3

如果您使用像Redux这样的状态管理器，则应该存储来自LenderLogin或CustomerLogin的数据（通过调度事件），然后在Login组件中检索它（带{来自connect()库的{1}}方法。

访问从路由器传递到表单的子项的值

3 个答案: