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

Question

我想知道，是否有办法通过Reakit's 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>
  );
}

Answer 1

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

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

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

Answer 2

您可以使用React Hooks“观察”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。

Answer 3

经过一段时间的编码后，我找到了解决方案！事实证明，您可以将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;
      }
    }}/>
  );
}