如何将对象数组绑定到再次包装另一个组件的列表组件？

问题描述

我正在尝试使用 mobx 绑定一组对象。

我正在用一个 TagFilter 组件包装一个材质 ui 芯片，该组件保持我的自定义 isSeleced 状态。

显示数据。

问题是当我选择芯片/标签“test 1”然后我选择芯片/标签“test 2”时，“test 1”没有被取消选择？

为什么？

为什么我在执行 this.props 时会在 TagFilters.onSelected 函数中看到子 onClick 函数的属性？

MainStore.ts

class MyStore implements IDtpStore {

  @observable public myFilters: ITagFilterProps[] =
    [
      { value: 'test1',label: 'test 1',isSelected: false },{ value: 'test2',label: 'test 2',];

}

MainComponent.tsx

private loader;
  private myStore;
  @observable private currentTechnology: string | undefined;
  @observable private currentLeadPurpose: string | undefined;

  constructor(p,c) {
    super(p,c);
    this.loader = Loader.create();
    this.myStore = new MyStore();
  }

 public componentDidMount() {    
      this.loader.load(this.myStore.loadFlow(...));
   
  }


render(){

      return (
      <>
          <TagFilters
          onChangeCurrentTag={this.onChangeCurrentTechnology}
          items={this.myStore.myFilters}
          backcolor={'#27A3CC'}
        />
      </>
    );

}

TagFilters.tsx

export interface ISelectedTagProps {
  onSelected(currentTag: string): void;
}

export interface IChangeCurrentTagProps {
  onChangeCurrentTag(currentTag: string): void;
}

class TagFilters extends React.Component<{ items: ITagFilterProps[] } & { backcolor: string }
  & IChangeCurrentTagProps & IWithDtpStoreProps & { intl: IntlShape },{}> {

  // private items: ITagFilterProps[];
  constructor(p,c);
    // this.items = this.props.items;
  }

  private onSelected = (currentTag: string) => {
    const { onChangeCurrentTag } = this.props;

    for (const item of this.props.items) {
      if (item.value !== currentTag) {
        // set all other chips/tags to false except the current tag/chip
        item.isSelected = false;
      }
    }
    onChangeCurrentTag(currentTag);
  }

  public render() {

    if (!this.props.items) {
      return null;
    }

    return (
      <>{
        this.props.items.map((element,index) => {
          return (
            <TagFilter
              backcolor={this.props.backcolor}
              onSelected={this.onSelected}
              key={index}
              label={element.label}
              value={element.value}
              isSelected={element.isSelected}
            />
          );
        })}
      </>
    );
  }
}

TagFilter.tsx

class TagFilter extends React.Component<ITagFilterProps & ISelectedTagProps & { backcolor: string } &
  IWithDtpStoreProps & { intl: IntlShape },{}> {
  @observable private isSelected = this.props.isSelected;


  private onClick = () => {
    this.isSelected = !this.isSelected;
    this.props.onSelected(this.props.value);
  }

  public render() {

    return (
      <>
        <Chip
          size={this.isSelected ? 'medium' : 'small'}
          style={{ background: this.props.backcolor,fontSize: '1.1em' }}
          label={this.props.label}
          id={this.props.value}
          clickable
          onClick={this.onClick}
        />
      </>
    );
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）