semantic-ui-react - React Semantic UI - 没有触发器的模态？

Question

是否可以在没有触发器的情况下使用模态？我将通过状态打开和关闭它。
例如，我想在输入字段(带有文件名)上使用 onClick 以使用文件选择器打开模态，然后在输入字段中编辑所选文件的名称。所有这些都在一个嵌套的模式中......
如果我在没有触发器的父组件中拥有两个模态，看起来会简单得多，我将通过 open={true/false} 显示/隐藏它们

谢谢

Answer 1

是的。不要设置 prop 触发器(它不是必需的)，只需提供 state/props 中的 open 值。

class container extends Component {
  state = {
    isParentOpen: false,
    isChildOpen: false
  }

  handleClick = () => {
    this.setState({
      isParentOpen: !this.state.isOpen
    });
  }

  handleFocus = () => {
    this.setState({
      isChildOpen: true
    });
  }

  render() {
    return(
      <div>
        <Modal
          open={this.state.isParentOpen}
          size="large"
        >
          ...
          <Input onFocus={this.handleFocus} />
        </Modal>
        <Modal
          open={this.state.isChildOpen}
          size="small"
        >
          ...
        </Modal>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}

(如果你愿意，你可以嵌套 Modal)