javascript 使用按钮和关闭图标关闭 React Semantic UI 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48086150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Closing React Semantic UI modal with button and close icon
提问by theJuls
I have a Modal where the user needs to fill in some forms and save whatever was filled in through a button in the Modal. When the user saves I would like the modal to close. I can get this done, through using the openprop on the Modalcomponent. But if I do this, the modal doesn't close when I attempt to do so through the closeIcon.
我有一个模态，用户需要填写一些表格并保存通过模态中的按钮填写的内容。当用户保存时，我希望模式关闭。我可以通过使用组件open上的 prop来完成这项工作Modal。但是如果我这样做，当我尝试通过 closeIcon 关闭模式时，模式不会关闭。
What can I do to allow the user to close the Modal through both methods?
我该怎么做才能让用户通过这两种方法关闭 Modal？
Here is my current modal code:
这是我当前的模态代码：
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>
)
}
采纳答案by Sagiv b.g
when you use the openprop you need to use the onClosehandler prop as well.
By the way, closeOnDimmerClickis set to trueby default.
当您使用open道具时，您还需要使用onClose处理程序道具。
顺便说一下，默认closeOnDimmerClick设置为true。
Here is a running example:
这是一个运行示例：
const { Modal, Form, Button, Icon } = semanticUIReact;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
something: '',
showModal: false
}
}
handleChangeForms = (e, { value }) => {
this.setState({ something: value });
}
handleCreateButton(evt) {
evt.preventDefault()
this.closeModal();
}
closeModal = () => {
this.setState({ showModal: false })
}
render() {
const {
something,
showModal
} = this.state
return (
<Modal closeIcon onClose={this.closeModal} 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={this.handleChangeForms}
/>
<Button onClick={(evt) => this.handleCreateButton(evt)}>Save</Button>
</Form>
</Modal.Content>
</Modal>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/semantic-ui-react.min.js"></script>
<div id="root"></div>