Jestem bardzo nowy, aby zareagować. Buduję stronę internetową rezerwacji lotu. Chcę ukryć pole formularza daty powrotu, gdy użytkownik wybiera wycieczkę w jedną stronę. Chciałem wiedzieć, co jest najlepszym sposobem na to.

const TripTypeButton = (props) => {
    const [rSelected, setRSelected] = useState(null);
      
    return (
      <div>
        <ButtonGroup>
          <Button color="primary" onClick={() => setRSelected(1)} active={rSelected === 1}>Round Trip</Button>
          <Button color="secondary" onClick={() => setRSelected(2)} active={rSelected === 2}>One Way</Button>
        </ButtonGroup>
      </div>
    );
  }

const HomePage = (props) =>{
    return(
    <div>
        <div>
            <h2> Search for flights</h2>
        </div>
        <div>
            <Form>
                <Row form>
                    <FormGroup>
                        <TripTypeButton />
                    </FormGroup>
                </Row>
                <Row form>
                  <Col md={3}>
                    <FormGroup>
                      <Label>Departure</Label>
                      <Input type="date" id="departure"  name="departure"/>
                    </FormGroup>
                  </Col>
                  <Col md={3}>
                    <FormGroup>
                      <Label for="exampleState">Return</Label>
                      <Input type="date" name="return" id="return"/>
                    </FormGroup>
                  </Col>
              <Row/>
            </Form>
        </div>
    </div>
    );
}
0
Dhaval Mohandas 26 lipiec 2020, 07:49

1 odpowiedź

Najlepsza odpowiedź

W tej sytuacji musisz zachować stan wybranej części typu podróży HomePage, a następnie na podstawie tego stanu renderowania Return flight czy nie!

Jak poniżej:

const HomePage = (props) => {
   
   const [rSelected, setRSelected] = useState(null);



   return (

      // some code 


      // trip type button handler
      <TripTypeButton handleSelectedTripType={setRSelected} rSelected={rSelected} />


      // the button section of code 
      { rSelected !== 1 
        && <Col md={3}>
             <FormGroup>
               <Label for="exampleState">Return</Label>
               <Input type="date" name="return" id="return"/>
             </FormGroup>
           </Col> 
       }


      // rest of jsx code

   )
   
}

A twój TripTypeButton byłby jak poniżej:

const TripTypeButton = ({ handleSelectedTripType, rSelected }) => {
      
    return (
      <div>
        <ButtonGroup>
          <Button color="primary" onClick={() => handleSelectedTripType(1)} active={rSelected === 1}>Round Trip</Button>
          <Button color="secondary" onClick={() => handleSelectedTripType(2)} active={rSelected === 2}>One Way</Button>
        </ButtonGroup>
      </div>
    );
  }

Nazywa się to stanem podnoszenia w reakcji! I dzięki temu, że zachowujesz swój stan na najwyższym poziomie komponenty i zarządzać manipulacją danych, przechodzącym wymagane ładowarki do elementów dziecka przez bezpośrednie rekwizyty lub kontekst!

0
a_m_dev 26 lipiec 2020, 05:00