Question

我在后端使用Flask进行反应，将Router和Material-ui作为前端进行反应。

我有：

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

我正在尝试创建简单的注册表单。我想提交表单的数据，然后使用react router重定向到索引页面。我的问题是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>
  );
}

当我从按钮 component = {Link}移至=“ /” 时：

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

然后重定向到索引页面。

我可以将这两者组合成一个按钮吗？

material-ui 中的

RaisedButton，FlatButton 不再起作用

Answer 1

添加到状态：

doRedirect: false

在render（）中：

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

在提交hanler中：

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

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

在render（）中：

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

当然：

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

Answer 2

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

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'
}

Answer 3

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

用实质性的ui按钮提交路由器链接，

3 个答案: