反应语义UI - 模态，而不触发？

Question

是否有可能使用一个模式没有触发器？我会打开，并通过国家关闭它。例如，我想在输入栏上使用的onClick（与文件名）与文件选择打开模式，然后编辑在输入字段已选定的文件的名称。所有这一切都在嵌套模式...看起来要简单得多，如果我将有一个父组件都没有情态动词的触发器，我将显示/通过开放式隐藏= {真/假}

谢谢

Answer 1

是的。不要设置道具触发（不要求），只是提供了从国家/道具开盘值。

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

（您可以嵌套模态，如果你想）

Answer 2

通过道具的模式组件，并根据上ComponentDidMount道具火handleOpen。这将允许模式被关闭。

class ModalContainer extends Component {
 componentDidMount() {
    const { startOpen } = this.props;

    if (startOpen) {
      this.handleOpen();
    }
  }

handleOpen = () => this.setState({ modalOpen: true });

handleClose = () => this.setState({ modalOpen: false });
render() {
  return (
     <Modal open={this.state.modalOpen} onClose={this.handleClose} />
  )
}