Реагировать на дизайн ящика для муравьев снаружи.

Question

Я использовал выдвижной ящик React ant design . Когда пользователь не заполнил форму, я щелкнул на внешней стороне выдвижного ящика и попытался отобразить уведомление сообщение. но это не работает, кто-нибудь знает, как это сделать правильно стек блиц здесь код здесь

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import 'antd/dist/antd.css';
    import './style.css';
    import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon } from 'antd';


    const { Option } = Select;

    class App extends Component {
    state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {

    return (
       <div>
        <Button type="primary" onClick={this.showDrawer}>
          <Icon type="plus" /> New account
        </Button>
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >

            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Name">
                 <Input placeholder="Please enter user name" />)}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Url">

                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
                      placeholder="Please enter url"
                    />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Owner">

                    <Select placeholder="Please select an owner">
                      <Option value="xiao">Xiaoxiao Fu</Option>
                      <Option value="mao">Maomao Zhou</Option>
                    </Select>

                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Type">

                    <Select placeholder="Please choose the type">
                      <Option value="private">Private</Option>
                      <Option value="public">Public</Option>
                    </Select>

                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Approver">

                    <Select placeholder="Please choose the approver">
                      <Option value="jack">Jack Ma</Option>
                      <Option value="tom">Tom Liu</Option>
                    </Select>

                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="DateTime">

                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      getPopupContainer={trigger => trigger.parentNode}
                    />

                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="Description">

                 <Input.TextArea rows={4} placeholder="please enter url description" />)}
                </Form.Item>
              </Col>
            </Row>

          <div
            style={{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

Вам необходимо добавить лог c об отображении уведомлений по методу onClose <Drawer/>. Обратите внимание, что этот метод принимает в качестве входных данных элементы, которые могут вызвать «закрытие» ящика, а именно div (фоновая маска), svg (значок X) и кнопка (Cancel).

В следующем примере уведомление об ошибке отображается, если при щелчке маски ящика ничего не вводится.

Пример также можно найти здесь: https://stackblitz.com/edit/react-28u4zw

import React, { Component } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import "./style.css";
import {
  message,
  Drawer,
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  DatePicker,
  Icon
} from "antd";

const { Option } = Select;

const FIELD_NAMES = ["name", "url", "owner", "type", "approver", "dates"];

const initialValues = FIELD_NAMES.reduce(
  (fieldList, fieldName) => ({ ...fieldList, [fieldName]: null }),
  {}
);

class App extends Component {
  state = {
    visible: false,
    ...initialValues
  };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = e => {
    this.setState({
      visible: false
    });

    const emptyFieldNames = FIELD_NAMES.filter(
      fieldName => !this.state[fieldName]
    );

    if (emptyFieldNames.length > 0 && e.target.tagName === "DIV") {
      return message.error(
        `Please fill ${emptyFieldNames.join(", ")} field(s)`
      );
    }
  };

  setInput = fieldName => e => {
    this.setState({ [fieldName]: e.target.value });
  };

  setSelect = fieldName => val => {
    this.setState({ [fieldName]: val });
  };

  setDate = fieldName => dateList => {
    this.setState({ [fieldName]: dateList.length > 0 ? dateList : null });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showDrawer}>
          <Icon type="plus" /> New account
        </Button>
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Name">
                <Input
                  placeholder="Please enter user name"
                  onChange={this.setInput("name")}
                />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Url">
                <Input
                  style={{ width: "100%" }}
                  addonBefore="http://"
                  addonAfter=".com"
                  placeholder="Please enter url"
                  onChange={this.setInput("url")}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Owner">
                <Select
                  placeholder="Please select an owner"
                  onChange={this.setSelect("owner")}
                >
                  <Option value="xiao">Xiaoxiao Fu</Option>
                  <Option value="mao">Maomao Zhou</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Type">
                <Select
                  placeholder="Please choose the type"
                  onChange={this.setSelect("type")}
                >
                  <Option value="private">Private</Option>
                  <Option value="public">Public</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Approver">
                <Select
                  placeholder="Please choose the approver"
                  onChange={this.setSelect("approver")}
                >
                  <Option value="jack">Jack Ma</Option>
                  <Option value="tom">Tom Liu</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="DateTime">
                <DatePicker.RangePicker
                  style={{ width: "100%" }}
                  getPopupContainer={trigger => trigger.parentNode}
                  onChange={this.setDate("dates")}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item label="Description">
                <Input.TextArea
                  rows={4}
                  placeholder="please enter url description"
                />
                )}
              </Form.Item>
            </Col>
          </Row>

          <div
            style={{
              position: "absolute",
              right: 0,
              bottom: 0,
              width: "100%",
              borderTop: "1px solid #e9e9e9",
              padding: "10px 16px",
              background: "#fff",
              textAlign: "right"
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));