Question

在onClick上添加下划线到category-item，并删除任何其他项的下划线。通过两个组件找到了一些关于如何做到这一点的答案，一个＆＃34; item-container-component＆＃34;和＆＃34; item-components＆＃34;。但我有三个组成部分。这是我希望实现的目标：

存档组件（母组件）：

class Archive extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      products: [],
      category: "",
      activeIndex: 0
    }
    this.filterHandler = this.filterHandler.bind(this);
  }

  filterHandler(tag, index){
    console.log('INDEX: ' + index);
    this.setState({
      category: tag,
      activeIndex: index
    })
  }

  componentDidMount(){
    const myInit = {
      method: "GET",
      headers: {
         "Content-Type": "application/json"
      }
    };

    fetch("/getProducts", myInit)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        this.setState({products:data});
      })
      .catch(function(err) {
        console.log('ERROR!!! ' + err.message);
      });
  }

  render() {
    return (
      <div>
        <Menu />
        <div className="archive-container">
          <div className="archive-wrapper">
            <CategoryContainer
              filterHandler={this.filterHandler}
              products={this.state.products}
              activeIndex={this.state.activeIndex}
            />
            <br/><br/>
            <ProductContainer
              products={this.state.category.length
                ? this.state.products.filter((prod) => prod.category === this.state.category)
                : this.state.products.filter((prod) => prod.category === 'Paint')
              }
            />
          </div>
        </div>
        <Footer />
      </div>
    );
  };
};

类别 - 容器组件：

class CategoryContainer extends Component {

  render(){
    const categories = [...new Set(this.props.products.map(cat => cat.category))];

    return (
      <div>
        <ul className="filterList">{
          categories.map((cat, index) =>
            <CategoryItem
              key={index}
              index={index}
              category={cat}
              active={index === this.props.activeIndex}
              handleClick={() => this.props.filterHandler(cat, index)}
            />
          )
        }</ul>
      </div>
    );
  };
};

类别项目组件：

class CategoryItem extends Component {
  render(){
    return (
      <div>
        <li
          className={this.props.active ? 'active' : 'category'}
          onClick={this.props.handleClick}
        >
            {this.props.category}

        </li>
      </div>
    );
  };
};

的Yelp！中号

Answer 1

假设您有一个li标签，您想要更改其颜色。你可能会尝试这样的事情。

<li id="colorChangeOnClick" class="redColor" onclick={this.onClickFunction()}></li>

然后在您的react类中，您可以使用参数e：

的on click函数

onClick(e) {
   //This would give you all the field of the target
   console.log(e.target.elements);
   // you can do all sorts of Css change by this way
   e.target.element.class="newGreenColor";
}

同时确保更改状态或道具，否则页面将无法再次渲染。

突出显示项目onClick - React.js

1 个答案: