根据下拉值 ReactJS 切换可见性

Question

我正在尝试根据另一个下拉菜单的值切换一个下拉菜单的可见性。 So when the first option is selected, the second dropdown becomes visible below and when that option is no longer selected, the dropdown below vanishes.

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

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

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

Called when the user attempts to change the value.

onChange(event: SyntheticEvent, data: object)

event React's original SyntheticEvent.

data All props and proposed value.

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

Answer 2

我的解决方案使用 React Hooks 并且我在 React.FunctionComponent<ITypeProps> 的上下文中使用 state 并检测生成的 dropdown 中的当前元素以设置 state (hide/show 元素通过添加 Bootstrap 样式类).

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

Hooks let you use React features (like state) from a function — by doing a single function call.

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

这将做什么：

在 select 下拉列表发生变化时，它会更新状态
如果下拉列表的 selected 值为“1”，则布尔变量 showElement 将为 true
如果下拉列表的 selected 值为但 “1” 布尔变量 showElement 将为 false
状态改变时组件将重新渲染
div 的可见性将随着状态的变化而变化，根据 Bootstrap shorthand d-block 和 d-none.

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

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

根据下拉值 ReactJS 切换可见性

Toggle Visibility based on Dropdown value ReactJS

state

toggle

reactjs

dropdown