将自己的组件添加到 Modal Antd 设计中答案

【问题标题】：Adding own component to Modal Antd design将自己的组件添加到 Modal Antd 设计中
【发布时间】：2020-06-12 16:47:12
【问题描述】：

是否可以将我自己的 Select 添加到 Modal 中？

只是我所说的选择的一个例子：

  <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </div>
</div>

这是我的模态属性函数

showConfirm = (e, title, content, submit, cancel) => {
    const onChange = this.onRadioButtonChange;
    if (e.target.value === 2) {
        confirm({
            okText: submit,
            cancelText: cancel,
            width: '600px',
            title,
            content,
            onOk() {
                onChange(e);
            },
            onCancel() {
            }
        });
    } else {
        onChange(e);
    }
};

我在广播组中使用该功能，包括翻译

 <Radio.Group style={{marginTop: '15px'}}
                             onChange={e => this.showConfirm(e, t('preferenceConfirmTitle'), t('preferenceConfirmContent'), t('submit'), t('cancel'))}

【问题讨论】：

请发布一些您尝试添加选择的代码
当然有可能。我不推荐它，因为 antd 已经有一个 Select 组件，您可以根据自己的特定需求进行定制。为什么 antd Select 组件对你不起作用？
@JayCodist 确实有一个选择组件，但我看不到 antd Modal 可以接受自己的组件或 antd 组件选择的属性
我不明白。你自己的组件是什么意思？或者您希望 Select 成为 Modal 的子项？
@JayCodist 正确

标签： javascript java reactjs antd

【解决方案1】：

如果我很好地理解了您的问题，Popconfirm 模态（或 Modal.confirm）组件不适用于这种类型的使用，您可以使用 Modal 组件。根据 antd 文档：

确认模态对话框的不同之处在于它比静态弹出的全屏模态更轻量。

如果你想在你的模式上进行比 Popconfirm 的“OK”和“Cancel”等更多的控件/自定义，你应该使用支持所有类型的内容/子项的 Modal 组件。然后你只需要这样做：

<Modal>
   <Select>
   ...
   </Select>
   ...
</Modal>

【讨论】：