javascript - 单击另一个过滤器时，过滤器按钮应取消选择

Question

我有几个按钮来过滤表中的项目选择。

当用户选择按钮时，相应的项目会突出显示。

我需要对其进行设置，以便在选择另一个过滤器按钮时，会清除先前的过滤器选择。

我希望一次只能进行一项筛选选择。我本来打算添加一个重置按钮，但认为用户希望能够在不同的过滤器之间切换，而不必每次都单击重置按钮。

这是我现在所拥有的:

export default class FilterIcon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };
    this.filterItem = this.filterItem.bind(this);
  }

  filterItem(id) {
    this.state.active === true
      ? this.props.applyFilter(null)
      : this.props.applyFilter(id);
    this.setState({
      active: !this.state.active
    });
  }

  render() {
    const { id, label } = this.props;
    let boundfilterItem = this.filterItem.bind(this, id);

    return (
      <FilterLink href="#" className={id} onClick={boundfilterItem}>
        {this.state.active === true ? (
          <FilterImage src={Icons[id + "Active"]} id={id} />
        ) : (
          <FilterImage src={Icons[id]} id={id} />
        )}
      </FilterLink>
    );
  }
}

父组件设置如下:

export default class Header extends React.Component {
 constructor(props) {
 super(props)
 this.state = {
  isActive: false,
 }
 this.iconToggle = this.iconToggle.bind(this)
}

iconToggle() {
 this.setState({
  isActive: !this.state.isActive,
 })
}

render() {
 return (
   <FilterIcon
      id="1"
       applyFilter={this.props.applyFilter}
    />
    <FilterIcon
       id="2"
       applyFilter={this.props.applyFilter}
     />
     <FilterIcon
       id="3"
       applyFilter={this.props.applyFilter}
     />
   )
 }

}

Answer 1

在父组件中，您将在其中呈现这些 FilterIcons 并向它们传递 label 和 id 以及方法 applyFilter ，为什么你不传递一个额外的 prop active 呢？同级组件不会直接相互通信，因此它的设计方式是，尽管 FilterIcons 在父级中调用 applyFilter，但它的同级 FilterIcons code> 对此调用一无所知。但是，如果在父级的 applyFilter 方法中更新包含以下内容的数组或对象(可能与 label 和 id 数据并排):有关哪些 FilterIcons 处于事件 的数据，您应该可以开始了。显然，applyFilter 需要做的事情比您当前拥有的 filterItem 方法还要多。它需要找到之前的事件 FilterIcons 将其停用并激活新的。