SweetAlert2：如何从反应组件中获取值？

Question

现在使用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时，我想获得承诺中的值，该值将由MyComponent设置。

DEMO

Answer 1

您可以根据文档尝试使用preConfirm（）。从perConfirm我们可以传递自定义值。

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

Answer 2

以下技巧应该做的工作：

let returnedValue;

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

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

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