reactjs - 使用 React 根据下拉值显示/隐藏文本字段

Question

我正在尝试TestField根据下拉列表中选择的值显示/隐藏文本框的可见性（在我的代码中为 ）。

I have seen several examples where conditional logic is written inside onChangeblock but in my case I have to dispatch another action inside onChangewhenever a dropdown option is chosen and therefore don´t know how to add a conditional logic.

到目前为止，这是我的代码：

              <InputGroup className='courses'>
                <Dropdown className = "course"
                  items={["Mathematics", "Geography", "Social Sciences"]}
                  onChange={(selectedItem: DropdownItem | null): void =>
                    dispatch({
                      type: "getCourse",
                      index: i,
                      value: selectedItem?.value
                    })
                  }
                />
             
               <TextField className=hours"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                    dispatch({
                      type: "getHours",
                      index: i,
                      value: e.target.value,
                    })
                  }
               />
             </InputGroup>

我对 React 很陌生，想知道您是否可以指导我在代码中添加条件逻辑的位置。提前致谢。

标签： reactjsredux

Answer 1

您只需要检查您的 selectedItem

{selectedItem === 'what you want' && <p>Conditional rendering</p>}

示例 ==>代码