时间戳

首页 > 解决方案 > React Formik Multi Select下拉列表在值数组更新时禁用所有选项

reactjs - React Formik Multi Select下拉列表在值数组更新时禁用所有选项

问题描述

我是反应新手，并尝试使用 react 和 formik 使用 ant-design 创建多选下拉列表。它目前在初始加载时填充了所有正确的数据（禁用/启用的选择选项），但是，当我更新数据数组以启用其他选项时，它会禁用每个选项。当我控制台记录数据时，阵列会正确更新，但我无法弄清楚为什么所有选项都被禁用。任何帮助将不胜感激。

这是填充应启用的选项数组的数据片段：

   const data = values.NPTRates.filter((rate) => {
    if (rate.NonProductiveTimeTypeId === 24) {
      return rate.DivisionId;
    }
    return null;
  });

填充数据的 MultiSelect 组件元素：

                  <DivisionMultiSelect
                    name="Divisions"
                    value={values.Divisions}
                    multiSelect={data}
                    onChange={(val) => {
                      setFieldValue('Divisions', val);
                    }}
                  />

以及呈现下拉列表的实际组件：

render() {
return (
  <Select
    value={this.props.value}
    name={this.props.name}
    className={this.props.cssClass}
    disabled={this.props.disabled}
    onChange={this.props.onChange}
    mode="multiple"
    showSearch
    filterOption={(input, option) => option.props.children.toLowerCase()
      .indexOf(input.toLowerCase()) >= 0}
    size="large"
  >
    {
      this.state.data.map(opt => (
        <Option
          disabled={this.props.multiSelect.find(data => data.DivisionId !== opt.Id)}
          key={opt.Id}
          value={opt.Id}
        >
          {opt.Name}
        </Option>
      ))
    }
  </Select>
);

} }

标签： reactjsselectantdformik

解决方案

我能够通过在查找上使用过滤器方法来解决问题。

              disabled={this.props.multiSelect
            .filter(data => data.DivisionId === opt.Id).length === 0
            || this.props.multiSelect.length === 0}

推荐阅读