選中復選框時如何使用 id 顯示和隱藏

Question

我有一個問題，我想知道如何在檢查 chebkbox 時通過他們的 id 顯示數據。

例如，當第一個復選框被選中時，我只想要名為“0”的地址並隱藏其他我已經嘗試做的其他地址，但我被卡住了，我想學習如何做。

我使用 firebase 作為 db ：

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 => {
      this.setState({
        listClients: snapshot.val(),
        loading: false
      });

    });
  }

  handleOptionChange = changeEvent => {

    this.setState({
      selectedOption: changeEvent.target.value,
      selectedStyle : {display : 'block'},
      selectedId: 1
    });


  };

  render() {
    let selectedStyle = this.state.selectedStyle

    if (this.state.loading) {
      return <h1>Chargement...</h1>;
    }
    const clients = this.state.listClients.map((client, i) => (
      <tr>
        <td>
          <input
            key={client + i}
            id={"checkbox" }
            type="checkbox"
            value={"option"+i}

            onChange={this.handleOptionChange}
            checked={this.state.selectedOption === "option"+i}
          />
        </td>
        <td>{client.nom}</td>
        <td>{client.prenom}</td>
      </tr>
    ));

    const clientAdr = this.state.listClients.map((client, i) => (
      <tr key={i}>
        <td id={"myDIV" + i}   value={"option"+i} onChange={this.handleOptionChange} style={selectedStyle}>
          {client.adresse}
        </td>
      </tr>
    ));




    return (
      <>
        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th></th>

              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>{clients}</tbody>
        </Table>

        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th>Adresse : </th>
            </tr>
          </thead>

          <tbody>{clientAdr}</tbody>
        </Table>
      </>
    );
  }
}

export default ListClients;

我目前所擁有的：

Answer 1

嘗試這個：

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 => {
      this.setState({
        listClients: snapshot.val(),
        loading: false
      });

    });
  }

  handleOptionChange = changeEvent => {

    const clientAdr = this.state.listClients.map((client, i) => (
      {"option"+i === changeEvent.target.value ?
      <tr key={i}>
        <td id={"myDIV" + i}  value={"option"+i} style={this.state.selectedStyle}>
          {client.adresse}
        </td>
      </tr>
      :""
      }
    ));

    this.setState({
      selectedOption: changeEvent.target.value,
      selectedStyle : {display : 'block'},
      selectedId: 1,
      cliAdress: clientAdr
    });



  };

  render() {
    let selectedStyle = this.state.selectedStyle

    if (this.state.loading) {
      return <h1>Chargement...</h1>;
    }
    const clients = this.state.listClients.map((client, i) => (
      <tr>
        <td>
          <input
            key={client + i}
            id={"checkbox" }
            type="checkbox"
            value={"option"+i}

            onChange={this.handleOptionChange}
            checked={this.state.selectedOption === "option"+i}
          />
        </td>
        <td>{client.nom}</td>
        <td>{client.prenom}</td>
      </tr>
    ));


    return (
      <>
        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th></th>

              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>{clients}</tbody>
        </Table>

        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th>Adresse : </th>
            </tr>
          </thead>

          <tbody>{this.state.cliAdress}</tbody>
        </Table>
      </>
    );
  }
}

可能有一些編譯錯誤，因為沒有編譯和測試，