如何正确更改从数据库中提取的复选框的状态

Posted 2023-02-19

【中文标题】如何正确更改从数据库中提取的复选框的状态

【英文标题】：How to properly change the state of a checkbox that pulls from a Database

【发布时间】：2021-03-24 01:06:32

【问题描述】：

我对反应比较陌生，正在尝试找出处理更改输入复选框状态的正确方法。

我有一个复选框，它是真还是假，具体取决于数据库中的布尔值。我目前正在使用 defaultChecked 在用户加载状态时将复选框设置为 true 或 false。我尝试使用选中的复选框，该复选框将触发我的 onClick 函数并更新数据库，但复选框将保持初始布尔状态。

因此，当您单击复选框时，onClick 事件会调用一个函数，该函数应将数据库布尔值更新为 true 或 false。我的问题是，如果数据库实际上没有更新，我不希望复选框变为 true 或 false。如果更新时出现通信错误并且 response.sucess 为 false，则复选框应保持在最初加载状态的值上。只有当 response.success 为真时，该复选框才应切换。 关于正确方法的任何建议？我相信我只需要更新状态，但对如何使用复选框和数据库进行更新有点困惑。谢谢。

<input
    id="database-boolean"type="
    checkbox"defaultChecked=this.props.dataBaseBoolean
    handleUpdate=this.handleUpdateDataBaseBoolean
    onClick=(e) => this.handleUpdateDataBaseBoolean(e)
/>


handleUpdateDataBaseBoolean = (e) => 
const key =this.props;
this.props.updateDataBaseBoolean(key, e).then((response) => 
if(response.success) 
    toastr.success(response.message,  timeOut: 2000, position: 'top-center');
else
toastr.error("Failed to update boolean",  timeOut: 2000, position: 'top-center');


);

【参考方案1】：

我会将isLoading 添加到状态，然后禁用加载按钮，然后添加条件以检查是否成功。

const [isLoading, setIsLoading] = useState(false);

...

isLoading ? regular input : loading input

为简单起见，您可以将加载输入显示为禁用输入。