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

【问题标题】：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({  });
  }

【问题讨论】：

标签： mysql node.js reactjs checkbox

【解决方案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)
        });
    }
}

【讨论】：