Javascript 关闭带有按钮和关闭图标的语义UI模式

我有一个模式，用户需要填写一些表单，并通过模式中的按钮保存所填写的内容。当用户保存时，我希望模式关闭。我可以通过使用

Modal

组件上的

open

道具来实现这一点。但如果我这样做，当我试图通过closeIcon关闭时，模态不会关闭

我该怎么做才能允许用户通过这两种方法关闭模式

以下是我当前的模式代码：

  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      <Modal closeIcon closeOnDimmerClick open={showModal} trigger={<Button onClick={() => this.setState({showModal: true})}><Icon className='plus'/>New Challenge</Button>}>
        <Modal.Header>My Modal</Modal.Header>
        <Modal.Content>
          <Form>
            <Form.Input
              label='Something'
              value={something}
              onChange={(evt) => this.handleChangeForms('something', evt.target.value)}
            />
            <Button onClick={(evt) => this.handleCreateButton(evt)}>Save</Button>
          </Form>
        </Modal.Content>
      </Modal>
    )
  }

handleCreate按钮（evt）{
evt.preventDefault（）
// ...
//保存表单中键入的内容的代码
// ...
this.setState（{showmodel:false}）
}
RenderModelForm（）{
常数{
某物
showModal
}=这个州
//如果我有打开的道具，我可以在点击按钮后关闭模态
//但是，当使用图标或单击调光器时，它将不再工作。
返回(
新挑战}>
我的情态
this.handleChangeForms（'something'，evt.target.value）}
/>
此.handleCreateButton（evt）}>保存
)
}

当您使用

open

道具时，您还需要使用

onClose

处理程序道具。
顺便说一下，

closeOnDimmerClick

默认设置为

true

---

下面是一个运行示例：

const{Modal，Form，Button，Icon}=semanticUIReact；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
有些东西：''，
showModal:错误
}
}
handleChangeForms=（e，{value}）=>{
this.setState（{something:value}）；
}
handleCreateButton（evt）{
evt.preventDefault（）
这个.closeModal（）；
}
closeModal=（）=>{
this.setState（{showmodel:false}）
}
render（）{
常数{
某物
showModal
}=这个州
返回(
新挑战}>
我的情态
此.handleCreateButton（evt）}>保存
)
}
}
render（，document.getElementById（“根”））