2

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

3 回答 3

1

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

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

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

于 2019-08-21T17:48:36.057 回答
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;
      }
    }}/>
  );
}
于 2019-08-21T19:33:03.233 回答
1

你可以“观察”checkbox.state使用React Hooks的变化：

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之前选中的复选框。但是，如果您希望它在 UI 上的复选框状态更改之前打开，window.confirm您可以使用它。React.useLayoutEffect

于 2019-08-21T19:34:41.953 回答