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