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）发送适当的数据

Answer 2

在“地图”函数内部的代码中，“ this”仍指代父组件。因此，您只有一种检查状态。这就是为什么您所有复选框都显示相同行为的原因。

更清洁的解决方案是定义一个新的有状态组件“ CardRow”，该组件具有地图中的所有内容以及其自己的状态和handleCheckboxChange函数。

如何从React中的映射数据中过滤数据

2 个答案: