如何在此处更改复选框的状态？

Posted 2023-02-24

【中文标题】如何在此处更改复选框的状态？

【英文标题】：How do I change the state of the checkbox here?

【发布时间】：2019-10-25 20:40:49

【问题描述】：

我已经能够在复选框的onClick 事件上更改数据库中companies 的activation status。现在我无法切换复选框的状态，我在这里缺少什么？

我查看了各种网站，但找不到解决方案。

这是我打印公司的代码。

this.state.allCompanies.map(com => (
                <tr>
                  <td>com.cname </td>
                  <td>
                    <a>
                        <input
                          type="checkbox"
                          name="active"
                          checked=com.is_active == 1 ? "true" : ""
                          onClick=
                            (() => 
                              this.setState( cked: !this.state.cked );
                            ,
                            e => this.handleActivated(e, com.cid))
                          
                        />
                    </a>
                  </td>
                </tr>
              ))

这是我的功能。

 handleActivated(e, id) 
    const comid = id;
    var data = 
      comid: id
    ;
    console.log(data);
    fetch("http://localhost:5000/edit/company", 
      method: "POST",
      headers: 
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json"
      ,
      body: JSON.stringify(data)
    )
      .then(function(response) 
        if (response.status >= 400) 
          throw new Error("Bad Response from server");
        
        return response.json();
      )
      .then(function(data) 
        console.log(data);
        if (data === "success") 
          // e.target.checked : !e.target.checked;
          this.setState( msg: "Company Edited", active: !e.target.checked );
        
      )
      .catch(function(err) 
        console.log(err);
      );

    // this.setState(  );
  

【参考方案1】：

您将两个函数传递给 onClick，据我所知（尽管我无法为此提供来源或告诉您原因），react 只会使用您为道具提供的最后一个值。这就是为什么设置cked 的状态可能不起作用的原因。

我建议只给它一个这样的功能：

onClick=
    (e) => 
        this.setState( cked: !this.state.cked );
        this.handleActivated(e, com.cid)
    

如果你想在setState完成后只执行第二个（因为它是异步的），你应该使用setState的回调函数。

onClick=
    (e) => 
        this.setState( cked: !this.state.cked , () => 
            this.handleActivated(e, com.cid)
        );