我有一个问题,我想知道在检查 chebkbox 时如何根据其 id 显示数据。
例如,当选中第一个复选框时,我只想要名为“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 => {
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;
我现在拥有的:
最佳答案
试试这个:
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>
</>
);
}
}
可能有一些编译错误,因为没有编译和测试,
关于javascript - 选中复选框时如何显示和隐藏 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59457111/