用材料 ui 按钮提交反应路由器链接答案

【问题标题】：react router link with material ui button submit用材料 ui 按钮提交反应路由器链接
【发布时间】：2019-04-15 08:27:36
【问题描述】：

我在后端使用flask，并将react、react router和material-ui作为前端。

我有：

material-ui/core 3.4.0,
反应路由器 dom 4.3.1

我正在尝试创建简单的注册表单。我想提交表单的数据，然后使用反应路由器重定向到索引页面。我的问题是material-ui按钮不适用于路由器的链接。是否有可能以某种方式将这两者结合在一起？

我的代码：

导入：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { withStyles, Grid, Paper, Avatar, Typography, Button, TextField} from '@material-ui/core'
import LockIcon from '@material-ui/icons/LockOutlined'

并渲染返回：

render() {
  const { classes } = this.props
  const { user: { username, password } } = this.state
  return (
    <Grid container className={classes.root}>
      <Paper className={classes.paper}>

        <Avatar className={classes.avatar}>
          <LockIcon />
        </Avatar>

        <Typography component="h1" variant="h5">
          Sign up
        </Typography>

        <form onSubmit={this.saveUser}>
          <TextField label="Username" value={username} onChange={this.handleChange('username')} margin="normal" required fullWidth/>
          <TextField label="Password" value={password} onChange={this.handleChange('password')} margin="normal" required fullWidth type='password'/>

          <Button component={Link} to="/" type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>

        </form>
      </Paper>
    </Grid>
  );
}

当我从 Button component={Link} to="/" 移除时：

<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>

然后提交工作并将数据保存在数据库中。当我删除 type="submit":

<Button component={Link} to="/" fullWidth variant="contained" color="primary">Sign Up</Button>

然后重定向到索引页面。

我可以以某种方式将这两个按钮组合在一起吗？

RaisedButton, FlatButton 来自 material-ui 不再工作了

【问题讨论】：

标签： reactjs react-router material-ui

【解决方案1】：

添加到状态：

doRedirect: false

在渲染（）中：

<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>

在提交处理程序中：

saveUser = () => {
    // **********
    // Your code to update database
    // **********

    this.setState({ doRedirect: true });
}

在渲染（）中：

{ this.state.doRedirect && <Redirect to="/" /> }

当然还有：

import { Redirect } from 'react-router-dom'

【讨论】：

我不确定在我的代码中将这一行放在哪里：{ this.state.doRedirect && }？我还是一个小初学者，所以如果你也能帮我解决这个问题，我将不胜感激？我了解其余部分。
例如： { this.state.doRedirect && } 跨度>

【解决方案2】：

在您的保存用户功能中，只需在保存用户后重定向。你可以从 props 中获取历史记录

saveUser = event => {
  event.preventDefault()
  //update database with user
  this.props.history.location.push('new-route')
  // or you can use window.location
  window.location.href = 'new-route'
}

【讨论】：

【解决方案3】：

 <Button
          onClick={() => {}}
          variant="outlined"
          component={Link}
          to={{
            pathname: `/`,
            search: location.search,
          }}
        >
          Submit
 </Button>

【讨论】：

点击时同步重定向，但作者在异步事件后要求重定向