react antd modal旁边在贴着一个modal

根据提供的引用内容，React Antd Modal 是一个 React 的模态框组件，而 styled-components 则是一个用于创建样式化组件的库。

要在 React Antd Modal 旁边添加一个 modal，可以使用嵌套的方式。你可以在 React Antd Modal 的外层再创建一个 Modal 组件，并将其放在 React Antd Modal 的旁边。

相关问题

react antd modal 如何展示y轴的滚动轴

在React Ant Design库中，Modal组件默认并不包含垂直滚动条，如果你需要在一个Modal中显示Y轴的滚动条，你可以通过CSS自定义样式或者Ant Design提供的`getContainer`属性来实现。

**方法一：CSS自定义**
在你的Modal组件上添加额外的CSS样式，覆盖默认样式，例如：

import { Modal } from 'antd';

const customStyle = {
  // 添加 overflow-y: scroll 或者 scrollbar-gutter: vertical 的样式，根据需求选择
  '.ant-modal-content': {
    overflowY: 'scroll',
    scrollbarGutter: 'vertical', // 可选值有 'horizontal' 和 'vertical'
  },
};

function MyModal() {
  return (
    <Modal
      // ...
      style={customStyle}
    />
  );
}

**方法二：getContainer属性**
如果你希望在某个特定容器（比如body）内渲染Modal并允许滚动，可以设置`getContainer`属性：

import { Modal } from 'antd';

function MyModal() {
  const containerNode = document.body; // 改为你想要放置滚动条的元素

  return (
    <Modal
      getContainer={node => node}
      // ...
    />
  );
}

这样，Modal的内容将会在其指定的容器上显示滚动条。

react antd 如何在Modal的确认按钮上获取Modal中From的表单数据

在React Antd中，可以使用`form`属性将`Modal`组件中的表单与父组件进行关联，然后在`Modal`中的确认按钮上通过`form.submit()`方法来获取表单数据。

具体实现步骤如下：

1. 在`Modal`组件中添加`form`属性，使表单与父组件进行关联：

import { Form, Input, Modal } from 'antd';

const MyModal = ({ visible, onCancel, onOk, form }) => {
  const { getFieldDecorator } = form;

  return (
    <Modal
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form>
        <Form.Item label="Username">
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="Password">
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your password!' }],
          })(<Input.Password />)}
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Form.create()(MyModal);

2. 在`Modal`组件中的确认按钮上通过`form.submit()`方法来获取表单数据：

import { Form } from 'antd';
import MyModal from './MyModal';

const MyParentComponent = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const { form } = myFormRef.current;
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values); // 输出表单数据
        form.resetFields();
      }
    });
  };

  const myFormRef = useRef(null);

  return (
    <div>
      <button onClick={() => myModalRef.current.showModal()}>Open Modal</button>
      <MyModal
        wrappedComponentRef={(form) => myFormRef.current = form}
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleSubmit}
      />
    </div>
  );
};

export default MyParentComponent;

在上面的代码中，我们通过`form.validateFields(callback)`方法来校验表单数据，并且如果校验通过，就可以通过`values`参数获取到表单数据。同时，我们也可以通过`form.resetFields()`方法来重置表单数据。