Question

我正在尝试从redux表单中清除字段数组中的复选框数组。我该怎么办？

我正在使用members:[filterOption:{}, checkBoxOption:{}]格式的Redux形式FieldArray。 checkBoxOption的值取决于filterOption的下拉列表。每当用户从filterOption中选择一个选项时，他们都会得到一个复选框列表，必须从checkBoxOption列表中进行选择。

假设用户从filterOption和checkBoxOption中选择了一个值，现在他们更改了filterOption的值，结果将为{{ 1}}。这些值已被新值取代，但并不会取消选中。

我可以使用checkBoxOption清除values数组中的复选框数组，但是找不到如何清空字段数组的解决方案。

有人可以帮我吗？

fields.get(event).checkBoxOption = {}

获取复选框值的函数

<ul className="list-group">
      {
        fields.map((member, index) => (
          <li className="list-group filter-select-box" key={index}>
            <SelectBox
              name={`${member}.filterOption`}
              label="Metadata Attribute"
              options={attributes.map(attribute => ({
                value: attribute.name,
                label: attribute.name,
                disabled: selectedAttributes.filter(value => value.name === attribute.name).length > 0,
              }))}
              isChange
              handleSelectChange={opt => handleOptionChange(index, opt.value)}
            />
            {checkStatus(index) && (
              <div className="select-checkbox-option form-group">
                {
                  getCheckboxList(index).map((checkboxItem, x) => (
                    <CheckBox
                       key={x}
                       type="checkbox"
                       name={`${member}.checkBoxOption.${checkboxItem}`}
                       label={checkboxItem}
                       value={`${member}.checkBoxOption.${checkboxItem}`}
                       id={checkboxItem}
                    />
                  ))
                }
              </div>
            )}
          </li>
        ))
      }
      <li className="list-group filter-select-box">
        <button className="add-filter" type="button" onClick={() => fields.push({})}>
          <img src={filterPlus} alt="" className="filterPlus" />
          Add Filter
        </button>
        {touched && error && <span>{error}</span>}
      </li>
    </ul>

在复选框上设置值的功能

const handleOptionChange = (event, nameAttribute) => {
    const value = {
      index: event,
      status: true,
      name: nameAttribute,
    };

    let selectedAttributesStatus = false;
    for (let i = 0; i < selectedAttributes.length; i += 1) {
      if (value.index === selectedAttributes[i].index) {
        selectedAttributes[i].name = value.name;
        selectedAttributesStatus = true;
      }
    }

    if (!selectedAttributes.length || !selectedAttributesStatus) {
      setSelectedAttributes([...selectedAttributes, value]);
    }

    setShowOptions([...showOption, value]);
    getCategoricalVar(extractorId, nameAttribute)
      .then((resp) => {
        const newAttributeValue = {
          index: event,
          value: resp,
        };
        fields.get(event).checkBoxOption = {};
        setSelectedIndex(false);
        console.log('fields.get(event).checkBoxOption: ', fields.get(event).checkBoxOption);
        let attributeValuesStatus = false;
        for (let i = 0; i < attributeValues.length; i += 1) {
          if (newAttributeValue.index === attributeValues[i].index) {
            attributeValues[i].value = newAttributeValue.value;
            attributeValuesStatus = true;
          }
        }
        if (!attributeValues.length || !attributeValuesStatus) {
          setAttributeValues([...attributeValues, newAttributeValue]);
        }
      })
      .catch(printError);
  };

如何清除Redux格式的字段数组

0 个答案: