React Semantic UI - 没有触发器的模式？

Question

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

display/hide 它们

谢谢

Answer 1

是的。不要设置 prop 触发器（不需要），只需提供 state/props.

的开放值

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）

Answer 2

将 prop 传递给模态组件，并根据 ComponentDidMount 上的 prop 触发 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} />
  )
}

React Semantic UI - 没有触发器的模式？

React Semantic UI - Modal without trigger?

semantic-ui-react