Question

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

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

＆＃13;

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

＆＃13;

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}

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

onChange（事件：SyntheticEvent，data：object）

event React的原始SyntheticEvent。

数据所有道具和建议值。

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

Answer 2

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

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

通过钩子，您可以通过执行单个函数调用来使用函数的React功能（例如状态）。

根据Making Sense of React Hooks。

state

这将做什么：

更改选择下拉列表时，它将更新状态
如果下拉列表的选定值为“ 1”，则布尔变量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> }将为showElement
如果下拉列表的选定值为但为“ 1”，则布尔变量true将为false
更改状态后，组件将重新呈现
div的可见性将根据状态更改而改变，以具有Bootstrap简写showElement和d-block的样式“ display：block”或“ display：none”。

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

因此，希望这个简单的示例可以帮助某人并为您节省一些时间！

根据下拉值ReactJS切换可见性

2 个答案: