Как получить выбранные данные из дочернего состояния в родительское в React

#javascript #reactjs

Вопрос:

У меня есть страница рейса с различными карточками с разной информацией о маршруте в каждой. Внутри каждой карты у меня есть кнопка выбора, которая идентифицируется идентификатором рейса.

 
   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 });

Ответ №1:

Один из способов сделать это — передать идентификатор в методе onChange следующим образом

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

Затем в родительском компоненте вы можете получить свой элемент из массива данных следующим образом

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

Если вы хотите передать некоторые данные через другие компоненты, вам нужно прочитать о контексте реакции (https://reactjs.org/docs/context.html )

Ответ №2:

попробуйте это.

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