web-dev-qa-db-ja.com

閉じるReactボタンと閉じるアイコンを備えたセマンティックUIモーダル

ユーザーがいくつかのフォームに入力し、モーダルのボタンを使用して入力した内容を保存する必要があるモーダルがあります。ユーザーが保存するときに、モーダルを閉じてください。 openコンポーネントでModalプロップを使用することで、これを実行できます。しかし、これを行うと、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>
    )
  }
javascriptreactjsmodal-dialogsemantic-uisemantic-ui-react
10
theJuls

openプロップを使用する場合は、onCloseハンドラプロップも使用する必要があります。
ところで、closeOnDimmerClickはデフォルトでtrueに設定されています。

以下は実行例です。

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>
10
Sagiv b.g