Question

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

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

但我希望添加一个

的按钮

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

有没有办法使用react而不使用本地存储或会话变量来执行此操作？

Answer 1

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

Answer 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} />

以编程方式打开状态为react的路由

2 个答案: