以编程方式打开状态为反应的路线答案

【问题标题】：Programmatically open a route with state in react以编程方式打开状态为反应的路线
【发布时间】：2017-01-10 13:29:45
【问题描述】：

我有两种类型的项目，其中一种可以包含与另一种相似的数据。

目前，当表单用于保存项目时，它会保存它，然后使用browserHistory.push 显示下一页。

但我希望添加一个按钮

保存当前项目
将它们重定向到表单以添加其他项目类型，
使用第一项中的数据部分填写此表格。

有没有办法使用 react 而不是使用本地存储或会话变量来做到这一点？

【问题讨论】：

标签： javascript meteor reactjs react-router jsx

【解决方案1】：

你应该看看Redux（或其他基于 Flux 的库）在组件和路由之间存储数据，避免过度的 prop 嵌套。

【讨论】：

【解决方案2】：

browserHistory.push 不起作用。它只会将您移动到某个位置，但不会更新应用程序状态。您需要更新应用程序状态，这将反映到位置更新中，但不是相反的方向。请记住，在 React 中，数据是第一位的，它的表示，即使是可变的，也不会改变数据。地点也是如此。

为了使重定向单独起作用，我建议将您的组件包装到withRouter higher-order component。

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <button
          onClick={() => this.props.router.push('/new-location')}>
          Click me to go to /new-location
        </button>
      </div>
    );
  }
}

但是如果您需要将数据从一个组件传递到另一个组件，而这两个组件不在层次结构中，我会同意 Alomsimoy 并推荐使用 Redux。但是，如果出于某种原因，这不是一个选项，您可以将此数据存储在两个表单的父组件中：

class FormA extends Component {
  render() {
    return (
      <form onSubmit={() => this.props.onSubmit()}>
        <input
          type="text"
          value={this.props.inputA}
          onChange={(event) => this.props.handleChangeA(event)} />
      </form>
    );
  }
}

class FormB extends Component {
  render() {
    return (
      <form onSubmit={() => this.props.onSubmit()}>
        <input
          type="text"
          value={this.props.inputB}
          onChange={(event) => this.props.handleChangeB(event)} />
      </form>
    );
  }
}

而他们的父母将统治位置和状态更新：

class Forms extends Component {
  constructor() {
    super();
    this.state = {};
  }

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

  renderForm() {
    const {
      params: {
        stepId
      }
    } = this.props;

    if (stepId === 'step-a') { // <- will be returned for location /form/step-a
      return (
        <FormA
          inputA={this.state.inputA}
          handleChangeA={(event) => this.handleChange('inputA', event.target.value)}
          onSubmit={() => this.props.router.push('/form/step-b')} />
      );
    } else if (stepId === 'step-b') { // <- will be returned for location /form/step-b
      return (
        <FormB
          inputB={this.state.inputB}
          handleChangeB={{(event) => this.handleChange('inputA', event.target.value)} />
      );
    }
  }

  render() {
    const {
      children
    } = this.props;

    console.log(this.state); // track changes

    return (
      <div>
        {this.renderForm()}
        <button
          onClick={() => this.props.router.push('/new-location')}>
          Click me to go to /new-location
        </button>
      </div>
    );
  }
}

export default withRouter(Forms);

所以他们的路线看起来像

<Route path="form/:stepId" component={Forms} />

【讨论】：