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

时间:2018-11-12 15:22:37

标签: reactjs react-router material-ui

我在后端使用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 不再起作用

3 个答案:

答案 0 :(得分:0)

添加到状态:

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'

答案 1 :(得分:0)

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

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

答案 2 :(得分:-1)

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