时间戳

首页 > 解决方案 > 如何在 React 中将选定的数据从子状态获取到父状态

javascript - 如何在 React 中将选定的数据从子状态获取到父状态

问题描述

我有一个飞行页面，上面有各种卡片，每张卡片都有不同的路线信息。在每张卡片中，我都有一个由 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 });

标签： javascriptreactjs

解决方案

一种方法是像这样在 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）

推荐阅读