React Component не отображается при нажатии CardActionArea из пользовательского интерфейса материала - PullRequest
Новая
       33

React Component не отображается при нажатии CardActionArea из пользовательского интерфейса материала

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

У меня странная проблема, с которой я никогда не сталкивался.

Я использую компоненты пользовательского интерфейса материалов, в частности CardActionArea в сочетании с Redirect из react-router-dom

После нажатия CardActionArea я хочу перенаправить своих пользователей на подробный экранкомпонент, который они только что нажали.

Детальный вид иногда отображает, а иногда - нет.Например, если я щелкаю по CardActionArea подробное представление не отображает, но если я перехожу непосредственно к URL, подробное представление делает визуализацию.

Это соответствующий код: 

// Dashboard.js
return (
  <Grid container spacing={40} className={classes.root}>
    <TopMenu></TopMenu>
    <Router>
      <Route exact path="/dashboard/v/:videoId" component={VideoDetail} />
    </Router>
    <Router>
      <Route exact path="/dashboard" component={(YouTubeVideoGallery)} />
    </Router>
  </Grid>
);

CardActionArea здесь: 

  constructor(props) {
    super(props);
    this.state = {
      redirect: false
    };
    this.handleCardActionClick = this.handleCardActionClick.bind(this);
  }

  handleCardActionClick = () => {
    this.setState({redirect: true});
  }
  render() {
    const { classes } = this.props;
    const date = moment(this.props.video.publishedAt);
    if (this.state.redirect) {
      return (<Redirect to={`/dashboard/v/${this.props.video.id}`} />)
    }

    return (
      <Card className={classes.card}>
      <CardActionArea onClick={this.handleCardActionClick}>
        <CardHeader
          title={
            (this.props.video.title.length > 21) ?
              this.props.video.title.substr(0, 18) + '...' :
              this.props.video.title
            }
          subheader={`${date.format('MMMM DD[,] YYYY')} - Views: ${this.props.video.viewCount}`}
        />
        <CardMedia
          className={classes.media}
          image={this.props.video.thumbnails.medium.url}
          title={this.props.video.title}
          />
      </CardActionArea>
    </Card>
    );
  }

Я не совсем уверен, в чем проблема.

1 Ответ

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

Прежде всего handleCardActionClick - это функция со стрелкой, поэтому вам не нужно делать привязку в конструкторе. Это можно удалить

Для перенаправления на клик сделайте что-то вроде ниже 

 render(){
   const url = `/dashboard/v/${this.props.video.id}`;
   return(
      <div>
         {this.state.redirect && <Redirect to={url} />}
      </div>
   )
 }
...