React (Reakit)：当切换一个复选框时，如何要求确认？

Question

我在想，是否有办法要求Reakit复选框确认。我正在使用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>
  );
}

Answer 1

经过一段时间的编码后，我找到了解决方案！结果是，您可以将async放在Reakit Checkbox中。多亏了Tomislav和Diego，他们的回答帮助我尝试了不同的东西，并把它弄干净了！

，这是完整的函数：

// admin can edit the right to join back to the queue after getting to the front
function RecurringBox ({ row, personData }) {

  // sets the original values
  const checkbox = useCheckboxState({state: personData[row - 1].recurring});

  return (
    <Checkbox {...checkbox} onChange={async checkboxSwitch => {
      if (window.confirm("Change it?")) {

        checkboxSwitch.persist();

        // saving it to the database
        await put(`${process.env.API_PATH}/person`,
          {
            "id": personData[row - 1].id,
            "name": personData[row - 1].name,
            "recurring": checkboxSwitch.target.checked
          });
        reload(`${process.env.API_PATH}/person`);

      } else {
        return null;
      }
    }}/>
  );
}

Answer 2

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

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

这意味着，如果变量“ checked ”(需要置于您的React组件的状态)是true，则将选中复选框，并且当用户切换复选框时将调用名为“切换”的方法。在该方法中，您可以将显示确认提示符的代码放入其中，然后如果用户单击“是”，则更改“选中”，或者如果用户选中“否”，则保留该代码。

Answer 3

您可以使用checkbox.state使用反应钩“观察”更改。

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

  React.useEffect(() => {
    // checking if state has changed
    if (checkbox.state !== personData[row].recurring) {
      if (window.confirm("Want to do this?")) {
        // saving to database here
      } else {
        // revert checkbox state otherwise
        checkbox.setState(!checkbox.state);
      }
    }
  }, [checkbox.state, checkbox.setState, personData[row].recurring]);

  return (
    <div className="checkbox-admin-other">
      <Checkbox {...checkbox} />
    </div>
  );
}

使用React.useEffect，用户将在window.confirm打开之前看到选中的复选框。但是，如果您希望在UI上的复选框状态更改之前打开React.useLayoutEffect，则可以使用它。