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，为什么您还不传递额外的道具active？同级组件之间并不直接相互通信，因此，尽管FilterIcons正在父级中调用applyFilter，但同级组件FilterIcons对此一无所知调用。但是，如果在父级的applyFilter方法中更新了一个数组或对象（可能与label和id数据并排），其中包含有关FilterIcons是active您应该很好。显然，applyFilter将需要做的比您目前拥有的filterItem方法要多。它将需要找到先前active FilterIcons停用并激活新的。

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

1 个答案: