Реагировать на ссылку маршрутизатора с помощью кнопки пользовательского интерфейса. - PullRequest
Новая
       11

Реагировать на ссылку маршрутизатора с помощью кнопки пользовательского интерфейса.

0 голосов
/ 12 ноября 2018

Я использую колбу на бэкэнде и реагирую, реагирую на маршрутизатор и Material-UI в качестве внешнего интерфейса.

У меня есть:

  • material-ui / core 3.4.0,
  • реагирует на роутер dom 4.3.1

Я пытаюсь создать простую форму регистрации.Я хотел бы отправить данные формы, а затем перенаправить на страницу индекса, используя реакционный маршрутизатор.Моя проблема в том, что кнопка Material-UI не работает со ссылкой из роутера.Можно ли как-то объединить эти два?

Мой код:

import: 

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'

и рендеринг return: 

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 больше не работает

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

В вашей функции сохранения пользователя просто перенаправить после сохранения пользователя.вы можете получить историю от реквизита 

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'
}
0 голосов
/ 12 ноября 2018

Добавить в состояние: 

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