Показать новый компонент нажатием кнопки - PullRequest
Новая
       6

Показать новый компонент нажатием кнопки

0 голосов
/ 16 декабря 2018

Я делаю свой первый реактивный проект.Я новичок в программировании на JS, HTML, CSS и даже в веб-приложениях.

Я пытаюсь отобразить некоторую информацию при нажатии кнопки.

У меня есть API, который выглядит следующим образом: 

endpoint: https://localhost:44344/api/Projects

My Data from it:
[{"id":1,"name":"Mini Jira","description":"Description for first project in list","tasks":null},{"id":2,"name":"Farm","description":"Description for second one","tasks":null}]

И я в порядке с этим, я могу легко получить это с помощью axios в моем приложении реакции.

Теперь я покажу вам мой Project.js Компонент: 

import React, { Component } from "react";
import { ListGroupItem, Button, ButtonToolbar } from "react-bootstrap";
import ProjectDetails from "./ProjectDetails";

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name}</ListGroupItem>
        <Button onClick={Here i want to display new component with details }bsStyle="primary">Details</Button>
      </ButtonToolbar>
    );
  }
}

export default Project;

У меня есть все данные из API в project типе.

Мой вопрос, как отобразить компонент, который я назвал ProjectDetails.js при нажатии кнопки?Я хочу показать все данные, хранящиеся в project из моего API в отдельном представлении (новая страница или что-то подобное).

Вид выглядит так:

enter image description here

Спасибо за любые советы!

РЕДАКТИРОВАТЬ:

на основе ответа @Axnyff, я редактировал Project.js.все работает нормальноНо когда я хочу (для тестирования) передать project.name, я получаю ошибку map of undefined.Мой ProjectDetails.js: 

import React, { Component } from "react";

class ProjectDetails extends Component {
  state = {};
  render() {
    return <li>{this.props.project.name}</li>;
  }
}

export default ProjectDetails;

РЕДАКТИРОВАТЬ2:

В Project.js в @Axnyff отвечает, я только что отредактировал эту строку: 

{this.state.showDetails && (
      <ProjectDetails project={this.props.project} />
    )}

Я прошел проект по реквизиту, теперь он работает так, как я хочу.После клика он отображает project.name, на который я нажал.

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018 

function Bar() {
  return <h1>I will be shown on click!</h1>;
}

class Foo extends React.Component {
  constructor() {
    super();
    this.state = { showComponent: false };
  }

  handleClick = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <Bar />}
        <button onClick={this.handleClick}>click</button>
      </div>
    );
  }
}

ReactDOM.render(<Foo />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
0 голосов
/ 16 декабря 2018

Вы должны использовать состояние в вашем компоненте React.Давайте создадим поле с именем showDetails в вашем состоянии.

Вы можете инициализировать его в своем конструкторе с помощью 

constructor(props) {
    super(props); // needed in javascript constructors
    this.state = {
        showDetails: false,
    };
}

Затем вам нужно изменить onClick, чтобы установить для этого состояния значение true 

    <Button onClick={() => this.setState({ showDetails : true })} bsStyle="primary">Details</Button>

А затем используйте это состояние, чтобы показать или нет ProjectDetails: 

{ showDetails && <ProjectDetails /> }

Полный компонент должен выглядеть следующим образом: 

import React, { Component } from "react";
import { ListGroupItem, Button, ButtonToolbar } from "react-bootstrap";
import ProjectDetails from "./ProjectDetails";

class Project extends Component {
  constructor(props) {
      super(props); // needed in javascript constructors
      this.state = {
          showDetails: false,
      };
  }
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name}</ListGroupItem>
        <Button onClick={() => this.setState({ showDetails : true })} bsStyle="primary">Details</Button>
        { this.state.showDetails && <ProjectDetails /> }
      </ButtonToolbar>
    );
  }
}

export default Project;

Затем можно изменить логику, добавивпереключающий эффект и т. д.

Если вы этого еще не сделали, вам, вероятно, следует следовать официальному руководству

...