代码之家 › 专栏 › 技术社区 › Javid Asgarov

SweetAlert2:如何从React组件中获取值?

sweetalert2 reactjs javascript

Javid Asgarov · 技术社区 · 6 年前

用 sweetalert2 现在有 sweetalert2-react-content ,它允许您使用react组件显示swal内部。这很好,但我似乎找不到如何从该组件中获取值。

例如,我有一个组件,它有两个输入。

MySwal.fire({
  html: <MyComponent />
}).then(value => {
  // how to get here my values from MyComponent??
});

我想知道是否从那个组件中选中了复选框。

我试着让政府提供这些信息 onChangeHandler 在我调用的组件中 MySwal . 但这似乎根本不起作用,复选框不会改变。

在这个库的前一个版本中 swal.setActionValue ,这似乎是我所需要的,但在当前情况下不起作用 sweetlalert2 版本。

总而言之,当我在提示符下按ok时,我想得到promise中的值,该值由 MyComponent .

DEMO

2 回复 | 直到 6 年前

Kesavan R 6 年前

你可以试着用 预确认() 根据文件。我们可以从perconfirm传递自定义值。

请查找以下示例: https://codesandbox.io/s/kk2nv9nmy7

luacassus 6 年前

以下技巧可以完成此任务:

let returnedValue;

MySwal.fire({
  html: <Options onChange={value => (returnedValue = value)} />
}).then(value => {
  console.log(returnedValue);
});

长话短说你可以通过 onChange 回调到组件并用于更新存储值的变量。它不是很漂亮,但它确实很漂亮。

你可以在这里找到完整的例子 https://codesandbox.io/s/o1005xv1q

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前