javascript - 如何从 react 中的映射数据中过滤数据

Question

我正在显示带有价格和位置映射数据的卡片

  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>



        )
    }

你知道我错在哪里吗？

Answer 1

进入检查状态保存FD1.FlightID而不是true/false，您将确切地知道哪张卡已被检查。

然后在提交时，您可以使用 this.state.checked (检查卡的 ID)发送适当的数据