單擊另一個過濾器時，應取消選擇過濾器按鈕

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 ？ 同級組件之間並不直接相互通信，因此其設計方式盡管applyFilter在父FilterIcons中調用applyFilter ，但其同級FilterIcons對此調用一無所知。 但是，如果在父級的applyFilter方法中更新一個數組或對象（可能與label和id數據並排），其中包含有關哪些FilterIcons active數據， FilterIcons您應該FilterIcons順利。 顯然， applyFilter需要做的比您當前擁有的filterItem方法還要多。 它將需要找到先前active FilterIcons停用並激活新的FilterIcons 。