Reactjs 根据下拉列表值切换可见性

我试图根据另一个下拉列表的值切换下拉列表的可见性。因此，当选择第一个选项时，下面的第二个下拉列表将可见，当不再选择该选项时，下面的下拉列表将消失

请容忍我，因为我还在学习。任何建议或帮助都将不胜感激！以下是我到目前为止的情况：

const firstOptions=[
{键：0，值：'default'，文本：'--选择一个选项--'}，
{键：1，值：'option1'，文本：'option1-当我被选中时，另一个将出现'}，
{键：2，值：'option2'，文本：'option2'}，
{键：3，值：'option3'，文本：'option3'}，
];
const secondOptions=[
{键：0，值：'default'，文本：'--选择一个选项--'}，
{键：1，值：'option1'，文本：'option1'}，
{键：2，值：'option2'，文本：'option2'}，
];
类DropdownToggle扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedValue:“默认值”，
};
}
handleChange=（e）=>{
this.setState（{selectedValue:e.target.value}）；
}
render（）{
const message='You selected'+this.state.selectedValue；
返回(
{message}

);
}
}

您可以执行条件渲染以实现所需的行为

示例

render() {
    const message = 'You selected ' + this.state.selectedValue;
    return (
      <div style={{ marginTop: '50px', marginLeft: '50px' }}>
        <Dropdown
          options={firstOptions}
          selection
          value={this.state.selectedValue}
          onChange={this.handleChange}
        />
        {
          this.state.selectedValue === 'option1' ?
            <div style={{ marginTop: '50px' }}>
              <Dropdown
                options={secondOptions}
                selection
              />
            </div>
          : null
        }
        <p>{message}</p>
      </div>
    );
  }

---

可以执行条件渲染以实现所需的行为

示例

render() {
    const message = 'You selected ' + this.state.selectedValue;
    return (
      <div style={{ marginTop: '50px', marginLeft: '50px' }}>
        <Dropdown
          options={firstOptions}
          selection
          value={this.state.selectedValue}
          onChange={this.handleChange}
        />
        {
          this.state.selectedValue === 'option1' ?
            <div style={{ marginTop: '50px' }}>
              <Dropdown
                options={secondOptions}
                selection
              />
            </div>
          : null
        }
        <p>{message}</p>
      </div>
    );
  }

我的解决方案使用并且正在使用

React.FunctionComponent

上下文中的

state

，并在生成的

下拉列表中检测当前元素，以设置
状态（通过添加引导样式类隐藏/显示元素）

为了简化逻辑，我描述了一个未生成的下拉列表&它是关联的onChange事件

钩子允许您通过执行单个函数调用来使用函数的React特性（如状态）

根据

const管理器：React.FunctionComponent=（{}）=>{
常量[状态，设置状态]=React.useState({
showElement:错误
});
常量handleChange=（值）=>{
如果（值&&（值==1）
setState（{…状态，showElement:true}）；
其他的
setState（{…状态，showElement:false}）；
}
返回
项目1+显示分区
项目2
项目3
隐藏/显示我！
}

这将做什么：


更改select下拉列表时，它将更新状态
如果下拉列表的选定值为“1”，则布尔变量
showElement
将为
true
如果下拉列表的选定值不是“1”，则布尔变量
showElement
将为false
更改状态时，组件将重新渲染
div的可见性将随着状态的改变而改变，根据引导速记
d-block
和
d-none
的样式为“display:block”或“display:none”

我花了太长时间来设计这个非常简单的React功能

因此，希望这个简单的示例能帮助某人并为您节省一些时间！
我的解决方案使用并且我正在使用
React.FunctionComponent的上下文中的
状态
，并在生成的
下拉列表中检测当前元素
来设置
状态
（通过添加引导样式类隐藏/显示元素）

为了简化逻辑，我描述了一个未生成的下拉列表&它是关联的onChange事件

钩子允许您通过执行单个函数调用来使用函数的React特性（如状态）

根据

const管理器：React.FunctionComponent=（{}）=>{
常量[状态，设置状态]=React.useState({
showElement:错误
});
常量handleChange=（值）=>{
如果（值&&（值==1）
setState（{…状态，showElement:true}）；
其他的
setState（{…状态，showElement:false}）；
}
返回
项目1+显示分区
项目2
项目3
隐藏/显示我！
}

这将做什么：


更改select下拉列表时，它将更新状态
如果下拉列表的选定值为“1”，则布尔变量
showElement
将为
true
如果下拉列表的选定值不是“1”，则布尔变量
showElement
将为false
更改状态时，组件将重新渲染
div的可见性将随着状态的改变而改变，根据引导速记
d-block
和
d-none
的样式为“display:block”或“display:none”

我花了太长时间来设计这个非常简单的React功能

希望这个简单的例子能帮助别人，为你节省一些时间！
这不是100%的效果。我是不是在handleChange函数中遗漏了一些东西，让它知道如何从选项数组中获取值？do
console.log（e.target.value）
在handleChange中，查看它是否为您提供了正确的值。它返回为
未定义的
。
下拉列表组件的包名是什么？或者它是您创建的自定义组件？@StuffedPoblano更新了我的答案。请检查它是否100%不起作用。我在handleChange功能中缺少什么吗n因此它知道如何从选项数组中获取值？do
console.log（e.target.value）
在handleChange中，查看它是否为您提供了正确的值。返回时为
未定义的
。组件的
下拉列表的包名是什么？或者它是您创建的自定义组件？@StuffedPoblano更新了我的答案。请检查它
const Manager: React.FunctionComponent<ITypeProps> = ({}) => { 
    const [state, setState] = React.useState({
        showElement: false
    });

    const handleChange = (value) => {
        if (value && (value == 1)
            setState({ ...state, showElement: true });
        else 
            setState({ ...state, showElement: false });
    }

   return 
   <div>
       <select>
          <option value="1" onChange={handleChange}>Item1 + Show Div</option>
          <option value="2" onChange={handleChange}>Item2</option>
          <option value="3" onChange={handleChange}>Item3</option>
       </select>
       <div className={state.showElement ? "d-block" : "d-none"}> Hide / Show me!</div>
   </div>
}