У меня есть проблема, я хотел бы знать, как отображать данные благодаря их идентификатору, когда проверяется chebkbox.

Например, когда установлен первый флажок, я просто хочу адрес с именем «0» и скрываю остальные адреса, которые я уже пытаюсь сделать, но я застрял и хотел бы узнать, как это сделать.

Я использую FireBase в качестве базы данных:

введите описание изображения здесь

import React, { Component } from "react"; import * as firebase from "firebase"; import { Table, InputGroup } from "react-bootstrap"; class ListClients extends React.Component { state = { loading: true, selectedOption: "option0", selectedStyle : {display : 'none'}, selectedId : "" }; componentWillMount() { const ref = firebase .database() .ref("listClients") .orderByChild("id"); ref.on("value", snapshot ={amp}gt; { this.setState({ listClients: snapshot.val(), loading: false }); }); } handleOptionChange = changeEvent ={amp}gt; { this.setState({ selectedOption: changeEvent.target.value, selectedStyle : {display : 'block'}, selectedId: 1 }); }; render() { let selectedStyle = this.state.selectedStyle if (this.state.loading) { return {amp}lt;h1{amp}gt;Chargement...{amp}lt;/h1{amp}gt;; } const clients = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input key={client   i} id={"checkbox" } type="checkbox" value={"option" i} onChange={this.handleOptionChange} checked={this.state.selectedOption === "option" i} /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.nom}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.prenom}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); const clientAdr = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr key={i}{amp}gt; {amp}lt;td id={"myDIV"   i} value={"option" i} onChange={this.handleOptionChange} style={selectedStyle}{amp}gt; {client.adresse} {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); return ( {amp}lt;{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last Name{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clients}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Adresse : {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clientAdr}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;/{amp}gt; ); } } export default ListClients; 

Что у меня на данный момент:

введите описание изображения здесь

попробуй это:

 import React, { Component } from "react"; import * as firebase from "firebase"; import { Table, InputGroup } from "react-bootstrap"; class ListClients extends React.Component { state = { loading: true, selectedOption: "option0", selectedStyle : {display : 'none'}, selectedId : "", cliAdress : null }; componentWillMount() { const ref = firebase .database() .ref("listClients") .orderByChild("id"); ref.on("value", snapshot ={amp}gt; { this.setState({ listClients: snapshot.val(), loading: false }); }); } handleOptionChange = changeEvent ={amp}gt; { const clientAdr = this.state.listClients.map((client, i) ={amp}gt; ( {"option" i === changeEvent.target.value ? {amp}lt;tr key={i}{amp}gt; {amp}lt;td id={"myDIV"   i} value={"option" i} style={this.state.selectedStyle}{amp}gt; {client.adresse} {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; :"" } )); this.setState({ selectedOption: changeEvent.target.value, selectedStyle : {display : 'block'}, selectedId: 1, cliAdress: clientAdr }); }; render() { let selectedStyle = this.state.selectedStyle if (this.state.loading) { return {amp}lt;h1{amp}gt;Chargement...{amp}lt;/h1{amp}gt;; } const clients = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input key={client   i} id={"checkbox" } type="checkbox" value={"option" i} onChange={this.handleOptionChange} checked={this.state.selectedOption === "option" i} /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.nom}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.prenom}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); return ( {amp}lt;{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last Name{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clients}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Adresse : {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{this.state.cliAdress}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;/{amp}gt; ); } } 

может быть, есть некоторые ошибки компиляции, потому что не скомпилированы и не протестированы,

Бабак Ягхуби

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,