如何在React中从子状态到父状态选择数据

Question

我有一个航班页面，其中包含各种卡片，每个卡片中都有不同的路线信息。 在每张卡中，我都有一个由flightID标识的选择按钮。

   Select(FD) {

 this.state={route:''};

       return (
           <div>
               {FD.FlightID}
            <label>
                <Checkbox id={FD.FlightID}
                          name={FD.FlightID}
                          checked={this.setState.route}
                          onChange={this.handleCheckboxChange}
                />
                <span>Select</span>
            </label>
           </div>
        )
    }

在每个卡中调用Select方法。

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>


             {this.Select(FD1)}

      <CardActions>'

如何访问选择发送以进行预订的特定卡的数据？

编辑：handleCheckBoxChange

handleCheckboxChange = event =>
        this.setState({ route: event.target.checked });

Answer 1

一种方法是像这样在onChange方法中传递ID

<Checkbox
  ...
  onChange={() => this.handleCheckboxChange(FD.FlightID)}
/>

然后在父组件中，您可以像这样从数据数组中获取元素

handleCheckboxChange = (id) => {
  const selected = data.find(e => e.FlightID = id);
  ...
}

如果您想通过更多组件传递一些数据，则需要阅读有关React上下文的信息（ https://reactjs.org/docs/context.html ）

Answer 2

尝试这个。

<Checkbox 
   id={FD.FlightID}
   name={FD.FlightID}
   checked={this.setState.route}
   onChange={() => this.handleCheckboxChange(FD)}
/>