SweetAlert2：如何从反应组件中取回值？答案

【问题标题】：SweetAlert2: How to get back values from react component?SweetAlert2：如何从反应组件中取回值？
【发布时间】：2018-11-21 08:59:14
【问题描述】：

有了sweetalert2，现在有了sweetalert2-react-content，它可以让你使用React 组件在Swal 中显示。这很好，但我似乎无法找到如何从该组件取回值。

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

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

我想从该组件中获取复选框是否被选中。

我试图在我调用MySwal 的组件中拥有这些输入和onChangeHandler 的状态。但这似乎根本不起作用，复选框不会改变。

在这个库的以前版本中有swal.setActionValue，这似乎是我需要的，但它不适用于当前的sweetlalert2 版本。

总而言之，当我在提示符下按 OK 时，我想获取 promise 中的值，该值将由 MyComponent 设置。

DEMO

【问题讨论】：

你可以在代码沙箱或jsfiddle中创建一个小演示吗？
@varit05，是的，将演示放在问题中
看看github.com/sweetalert2/sweetalert2-react-content

标签： javascript reactjs sweetalert2

【解决方案1】：

您可以按照文档尝试使用 preConfirm()。从 perConfirm 我们可以传递自定义值。

请找到这个例子：https://codesandbox.io/s/kk2nv9nmy7

【讨论】：

你试过了吗？它出错了。其次，我真的不想在我的 Reactjs 代码中使用 document.getElementById。而且我已经阅读了有关 preConfirm 的信息，但不知道它是如何适应这里的。我的意思是，我确实有点，但不是全部。组件之间并没有真正的联系。
@askerovlab 是的，我试过了，但 option.js 没有保存。现在检查。并告诉我你是否在使用 redux ？
我是。不过，由于 document.getElementById，对这个解决方案不太满意。我想，也许带有 refs 的东西可能会起作用。如果 swal 有可能在模态上放置两个输入，那就太好了，然后我就根本不需要这个组件了。
@askerovlab 甜心不会暴露他们的孩子。我们可以使用 redux 将选项组件传递给您的 App 组件。

【解决方案2】：

以下技巧应该可以完成这项工作：

let returnedValue;

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

长话短说，您可以将onChange 回调传递给组件，并使用它来更新存储值的变量。它不是很漂亮，但它可以完成工作。

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

【讨论】：

..或者更好的是你可以使用preConfirm，比如preConfirm: () => returnedValue