时间戳

首页 > 解决方案 > React（Reakit）：切换复选框时如何要求确认？

reactjs - React（Reakit）：切换复选框时如何要求确认？

问题描述

我想知道，是否有办法通过Reakit 的 checkbox进行确认。我正在使用Reakit，因为我找到了一种让它读取数据库布尔信息的快速方法，但我也欢迎其他方法！

我习惯于使用带有async和的按钮进行确认window.confirm：

<button onClick={async hiStackOverflow => {
  if (window.confirm("Want to do this?")) {
    // saving to database here 
  }
}}>

但我不知道如何使用复选框来做到这一点。简而言之，当用户打开/关闭复选框时，我希望页面确认（然后保存到数据库）。

// personData = database table, with boolean "recurring"
// row = which entity in a table we are talking about

function CheckboxThing ({ row, personData }) {

  const checkbox = useCheckboxState({state: personData[row].recurring});

  return (
    <div className="checkbox-admin-other">
      <Checkbox 
        {...checkbox} 
        // what here?? onClick or something?
      />
    </div>
  );
}

标签： reactjscheckboxasync-awaitonclickreakit

解决方案

Reakit 的复选框可以这样使用：

const toggle = () => setChecked(!checked);
return <Checkbox checked={checked} onChange={toggle} />;

这意味着如果需要将 React 组件状态的变量 ' checked ' 为真，则复选框将被选中，并且当用户切换复选框时，将调用名为 ' toggle ' 的方法。在该方法中，您可以输入将显示确认提示的代码，然后如果用户单击“是”则更改检查，或者如果他们检查“否”则保持原样。

推荐阅读