React语义UI - 没有触发器的模态?

时间:2017-10-31 14:38:49

标签: semantic-ui-react

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

由于

2 个答案:

答案 0 :(得分:10)

是的。不要设置道具触发器(它不是必需的),只需提供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)

答案 1 :(得分:0)

将道具传递给模态组件并根据ComponentDidMount上的道具触发手柄打开。这样可以关闭模​​式。

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