Question

我对React非常陌生。我正在建立一个机票预订网站。当用户选择单程旅行时，我想隐藏返回日期表单字段。我想知道什么是最好的方法。

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

Answer 1

在这种情况下，您需要将所选行程类型的状态保留在HomePage组件中，然后根据该状态呈现Return flight或不显示！

如下所示：

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

   )
   
}

和您的TripTypeButton如下所示：

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

这在React中称为提升状态！这样一来，您可以将状态保持在顶级组件中，并通过直接用props或上下文将所需的处理程序传递给子组件来管理数据操作！

单击单选按钮隐藏其他组件

1 个答案: