Отображение нового компонента нажатием кнопки
Я делаю свой первый проект реакции. Я новичок в программировании 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 в отдельном представлении (новая страница или что-то в этом роде).
Вид выглядит так:
Спасибо за любые советы!
Обновлено:
на основе ответа @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, на который я щелкнул.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы должны использовать состояние в своем компоненте 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;
Затем вы можете изменить логику, чтобы добавить эффект переключения и т. д.
Если вы этого не сделали, вам, вероятно, следует следовать официальный учебник
Если ваш компонент ProjectDetails относится к одному проекту, вам, вероятно, потребуется передать ему реквизит, например <ProjectDetails name = "Mini Jira" />
У меня будет много проектов, я хочу отображать (например) описание в зависимости от того, какую кнопку я нажимаю. Как же тогда передать project на ProjectDetails.js? Это главное, что я хочу сделать, потому что ваше решение работает нормально! (я могу отобразить что-то при нажатии кнопки, вы отвечаете, работает), но моя вторая часть вопроса заключалась в том, как отображать детали на основе моего project? Как видите, на данный момент у меня есть 2 проекта, Farm и MiniJira.
Разве вы не можете передать this.props.project.name своему объекту ProjectDetails?
когда я добавляю в ProjectDetails.js эту строку взамен (только для тестирования): return <li>{this.props.project.name}</li>;, я получаю ошибку en, что project.name имеет неопределенное значение: /
Загляните в мою редакцию. Я отредактировал Project.js в вашей форме, и он работает нормально
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>
Выглядит довольно просто, я проверю через секунды! Но скажите мне, как
ProjectDetailsтеперь будет, что я хочу отображать детали элемента, по которому я щелкнул? Например, из моего сообщения, когда я щелкнул «Подробности» вMini Jira, как компонентProjectDetailsузнает, что я хочу отображать сведения из этой записи из моего API?