我正在显示带有价格和位置映射数据的卡片
return data.map( FD1 => (
<Row>
<Card className="card">
<Card body className="text-center">
<CardTitle data-es-label="location"> Location:
{FD1.Departure}
</CardTitle>
<CardText data-es-label="Price">Price
{FD1.price}
</CardText>
<label>
<Checkbox
id={FD1.FlightID}
name={FD1.FlightID}
checked={this.state.checked === FD1.FlightID}
onChange={this.handleCheckboxChange}/>
<span>Select</span>
</label>
<CardActions>'
每张卡都有一个复选框,我的想法是当选中并提交该复选框时 - 映射到该卡的信息将被发送以进行“预订”。
是否可以从映射的数据中过滤数据。每张带有数据的“卡”都有一个唯一的 ID。如何按卡过滤数据并将详细信息发送到预订页面?
当我选择一个复选框时,他们都选择了。
handleCheckboxChange = event =>
this.setState({ checked: event.target.checked });
编辑:尝试 - 这是我尝试过的
handleCheckboxChange = event =>
this.setState({ checked: event.target.checked });
Select(FD) {
this.state={checked:FD.FlightID};
return(
<label>
<Checkbox id={FD.FlightID}
name={FD.FlightID}
checked={this.state.checked}
onChange={this.handleCheckboxChange}
/>
<span>Select</span>
</label>
)
}
你知道我错在哪里吗?
最佳答案
进入检查状态保存FD1.FlightID而不是true/false,您将确切地知道哪张卡已被检查。
然后在提交时,您可以使用 this.state.checked (检查卡的 ID)发送适当的数据
关于javascript - 如何从 react 中的映射数据中过滤数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55502825/