javascript - 如何在 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 context ( https://reactjs.org/docs/context.html )