javascript - 如何在 ReactJS 中将多个复选框标记为已选中而其他复选框未选中？

Question

我有两个数组

主列表:

[
  { id: 0, description: "a" },
  { id: 1, description: "b" },
  { id: 2, description: "c" },
  { id: 3, description: "d" }
]

偏好列表:

[
  {id: 0, description: "a" },
  {id: 2, description: "c" }
]

我想要做的是，渲染四个复选框(或更多，具体取决于 masterList 的长度)并仅预检查首选项列表中列出的那些复选框。

我尝试过，但无法让它发挥作用。

这是我到目前为止所做的:

{
  this.state.masterList && this.state.masterList.length ? (
    this.state.masterList.map((item, index) => (
      <div key={`item_${index}`} className="form-group">
        <div className="checkbox">
          <label>
            {this.state.preferencesList && this.state.preferencesList.length
              ? this.state.preferencesList.map(
                  insurerFeature =>
                    insurerFeature.id == item.id ? (
                      <input
                        type="checkbox"
                        onChange={this.changeFeaturePreferences}
                        value={item.id}
                        defaultChecked
                      />
                    ) : (
                      <input
                        type="checkbox"
                        onChange={this.changeFeaturePreferences}
                        value={item.id}
                      />
                    )
                )
              : "failed to get insurers items"}
            {item.description}
          </label>
        </div>
      </div>
    ))
  ) : (
    <p>There are no items available.</p>
  );
}

changeFeaturePreferences 方法:

changeFeaturePreferences = event => {
  let { id } = this.state.resource;
  let featureId = event.target.value;
  let checkbox = event.target;

  // Reset state
  this.setState({ success: null });

  // Add Feature
  if (checkbox.checked) {
    let payload = [featureId];
    return MyService.setMyFeatures(id, payload).then(
      response => this.setState({ success: true }),
      error => this.setState({ success: false })
    );
  }
  // Remove Feature
  if (!checkbox.checked) {
    return MyService.deleteMyFeatures(id, featureId).then(
      response => this.setState({ success: true }),
      error => this.setState({ success: false })
    );
  }
  // Return with error
  return this.setState({ success: false });
};

Answer 1

您可以使用Array.prototype.some()确定该对象是否存在于 preferencesList 中。

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

示例

{
  this.state.masterList && this.state.masterList.length ? (
    this.state.masterList.map((item, index) => {
      const checked = preferencesList.some((checkedItem) => checkedItem.id === item.id);
      return (
      <div key={`item_${index}`} className="form-group">
        <div className="checkbox">
          <label>
            <input
              type="checkbox"
              onChange={this.changeFeaturePreferences}
              value={item.id}
              checked={checked}
            />
            {item.description}
          </label>
        </div>
      </div>
    )})
  ) : (
    <p>There are no items available.</p>
  );
}