Question

我正在做Wes-Bos教程，并考虑从StorePicker提交表单后重定向到App.js组件的另一种方法。

我的StorePicker组件：

class StorePicker extends React.Component {
  goToStore(event) {
    event.preventDefault();
    const storeId = this.storeInput.value;
    return <Redirect to={`/store/${storeId}`} />;
  }

  render () {
    return (
      <Grid textAlign='center' columns={2}>
        <Grid.Row>
          <Grid.Column><br/>
            <Segment>
              <Form onSubmit={(e) => this.goToStore(e)} >
                <Form.Field >
                  <h1>Store Name</h1>
                  <input type="text" required
                    placeholder="Store Name"
                    ref={(input) => {this.storeInput = input}}
                    defaultValue={getFunName()} />
                </Form.Field>
                <Button fluid type='submit'>Visit Store -></Button>
              </Form>
            </Segment>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

我正在查看React路由器文档并尝试使用它<Redirect />似乎不起作用。有关如何管理此重定向的任何建议吗？感谢

Answer 1

您可以通过编程方式使用history道具：

push（path，[state]） - （function）将新条目推送到历史堆栈

class StorePicker extends React.Component {
  goToStore = (event) => {
    event.preventDefault();
    this.props.history.push(`/store/${this.storeInput.value}`);
  }

  render() {
    return (
      <Grid textAlign="center" columns={2}>
        <Grid.Row>
          <Grid.Column>
            <br />
            <Segment>
              <Form onSubmit={this.goToStore}>
                <Form.Field>
                  <h1>Store Name</h1>
                  <input
                    type="text"
                    required
                    placeholder="Store Name"
                    ref={(input) => {
                      this.storeInput = input;
                    }}
                    defaultValue={getFunName()}
                  />
                </Form.Field>
                <Button fluid type="submit">
                  Visit Store ->
                </Button>
              </Form>
            </Segment>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }
}

如果您不想在历史记录中创建项目，也可以替换。

Answer 2

行。我已经设法通过其他一些例子来了解它。我的工作代码如下。它看起来有点复杂。

有更好的方法吗？

class StorePicker extends React.Component {
  constructor () {
    super();
    this.state = {
      fireRedirect: false
    }
  }
  goToStore(event) {
    event.preventDefault();
    this.setState({ fireRedirect: true })

  }

  render () {
    const { from } = this.props.location.state || '/'
    const { fireRedirect } = this.state

    return (
      <Grid textAlign='center' columns={2}>
        <Grid.Row>
          <Grid.Column><br/>
            <Segment>
              <Form onSubmit={(e) => this.goToStore(e)} >
                <Form.Field >
                  <h1>Store Name</h1>
                  <input type="text" required
                    placeholder="Store Name"
                    ref={(input) => {this.storeInput = input}}
                    defaultValue={getFunName()} />
                </Form.Field>
                <Button fluid type='submit'>Visit Store -></Button>
              </Form>
              {fireRedirect && (
                <Redirect to={from || `/store/${this.storeInput.value}`}/>)}
            </Segment>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

如何在表单onSubmit之后重定向到新组件？

2 个答案: