时间戳

首页 > 解决方案 > 反应切换开关显示/隐藏视图

javascript - 反应切换开关显示/隐藏视图

问题描述

我被困在我的项目中。我需要在切换开关（开/关）上显示/隐藏两个下拉选项。

请检查下图： 在此处输入图像描述

这是我的示例代码：

handleSwitch = (event, index) => {
    // TODO if true then display the empty dropdown selectionss
    console.log("event.target.checked", event.target.checked);
    console.log("index", index);
    this.setState({ toggleInputField: true });
}

{days.map((day, dayIndex) =>
 <Container key={dayIndex}>
  <Row>
<Col>
  <Switch
    nativeControlId='my-switch'
    checked={regularHours && regularHours.periods && regularHours.periods[this.findArrayIndex(regularHours.periods, day.openDay, 'openDay')] ? true : false}
    onChange={(e) => this.handleSwitch(e, dayIndex)} />
</Col>

<Col>
     <select className="form-control m-b--15" value={day.openTime} name={'openTime' + dayIndex} onChange={(event) => this.handleAddTimes(event, day)}>
       <option value="" key={0}>Select Time Open</option>
        {
          openingHours && openingHours.map((time, index) => 
            <option value={time} key={index}>{time}</option>
          )
        }
     </select>
    </Col>
    <Col>
      <select className="form-control m-b--15" value={day.closeTime} name={'closeTime' + dayIndex} onChange={(event) => this.handleAddTimes(event, day)}>
        <option value="" key={0}>Select Time Closed</option>
        {
          openingHours && openingHours.map((time, index) => 
            <option value={time} key={index}>{time}</option>
          )
        }
      </select>
    </Col>

  <Row>
</Container>)}

我只是不知道要跟踪选中的拨动开关并相应地显示下拉选择。

有任何想法吗？我很乐意为您提供任何帮助。谢谢！

标签： javascriptreactjs

解决方案

本质上，您需要使每一行成为一个组件，以便它们每个都可以控制自己的状态，或者您可以从父组件控制它们的状态。由于您只提供了代码的摘录，我假设您知道自己在 react 中的方式，并将提供一个使用功能组件和挂钩的示例，以简化操作。

function MyRow({day}) {
    let [show, setShow] = useState(true)
    
    return (
        <Row>
            <Col>
              <Switch
                nativeControlId='my-switch'
                checked={show}
                onChange={(e) => setShow(e.target.checked)} />
            </Col>
            {show && 
                <Col>
                    <!-- Code here -->
                </Col>
                <Col>
                      <!-- Code here -->
                </Col>          
            }
        <Row>
    )
}

function Main({days}){
    return (
        <Container>
            {days.map((day, dayIndex) => <MyRow key={dayIndex} day={day} />)}
        </Container>        
    )
}

我希望您可以将自己的逻辑应用于上述想法。免责声明：我没有测试代码，所以可能有一些错别字。

推荐阅读