根据下拉值 ReactJS 切换可见性答案

【问题标题】：Toggle Visibility based on Dropdown value ReactJS根据下拉值 ReactJS 切换可见性
【发布时间】：2018-04-05 11:20:56
【问题描述】：

我正在尝试根据另一个 Dropdown 的值来切换 Dropdown 的可见性。因此，当第一个选项被选中时，第二个下拉菜单在下方可见，当不再选择该选项时，下方的下拉菜单消失。

请多多包涵，因为我还在学习。任何建议或帮助将不胜感激！这是我目前所拥有的：

const firstOptions = [
  { key: 0, value: 'default', text: '--Select an Option--' },
  { key: 1, value: 'option1', text: 'option1 - when I am selected another shall appear' },
  { key: 2, value: 'option2', text: 'option2' },
  { key: 3, value: 'option3', text: 'option3' },
];

const secondOptions = [
  { key: 0, value: 'default', text: '--Select an Option--' },
  { key: 1, value: 'option1', text: 'option1' },
  { key: 2, value: 'option2', text: 'option2' },
];

class DropdownToggle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: 'default',
    };
  }

  handleChange = (e) => {
    this.setState({ selectedValue: e.target.value });
  }

  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}
        />
        <div style={{ marginTop: '50px' }}>
          <Dropdown
            options={secondOptions}
            selection
          />
        </div>
        <p>{message}</p>
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs toggle state dropdown

【解决方案1】：

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

示例

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

更新

您的handleChange 函数不正确。根据 Semantic-UI 文档，onChange 使用 2 个参数触发。 event 和 data。如果你像下面这样改变你的功能，它应该可以工作。

onChange {func}

当用户尝试更改值时调用。

onChange(事件：SyntheticEvent，数据：对象)

事件 React 的原始 SyntheticEvent。

数据所有道具和建议值。

handleChange = (event, data) => {
  console.log(data.value);
  this.setState({selectedValue: data.value});
}

【讨论】：

这不是 100% 的。我是否在 handleChange 函数中遗漏了一些东西，所以它知道从选项数组中获取值？
在handleChange中做console.log(e.target.value)，看看它是否给你正确的值
返回为undefined。
Dropdown 组件的包名是什么？还是您创建的自定义组件？
@StuffedPoblano 更新了我的答案。请检查一下

【解决方案2】：

我的解决方案使用React Hooks，我在React.FunctionComponent<ITypeProps> 的上下文中使用state 并检测生成的dropdown 中的当前元素来设置state（通过添加隐藏/显示元素Bootstrap 样式类）。

为了简化逻辑，我描述了一个非生成的下拉列表，它与 onChange 事件相关联。

Hooks 让你可以从一个函数中使用 React 特性（比如状态）——通过一个函数调用。

根据Making Sense of React Hooks。

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

这会做什么：

在选择下拉列表更改时，它会更新状态
如果下拉列表的选定值为“1”，则布尔变量showElement将为true
如果下拉列表的选定值是任何值但“1”，则布尔变量 showElement 将为 false
当状态改变时，组件将重新渲染
div 的可见性将随着状态的变化而变化，根据 Bootstrap 简写 d-block 和 d-none 具有样式“display: block”或“display: none”。

我花了太长时间来开发这个非常简单的 React 功能。

所以希望这个简单的例子可以帮助别人并节省你一些时间！

【讨论】：