时间戳

首页 > 解决方案 > 如何更改列表元素的类名

javascript - 如何更改列表元素的类名

问题描述

我有一个组件，即项目列表。

render() {
    const { clickHandler } = this.props;
return (
    <section className="container birds-list">
        <ul className="birds-list__list">
            {this.props.list.map(({name, id}) => (
                <li key={id} className="birds-list__item">
                    <div className="shape shape-default"></div>
                    <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
                </li>
            )
            )}
        </ul>
    </section>

在 clickHandler 函数中，我使用形状类名称更改 div 的背景颜色，例如e.target.previousSibling.classList.add('shape-complete');

但是当我想用新名称重新渲染我的组件时，我想用“shape shape-default”更改所有具有默认类名的 div 元素，而不是它我有带有类的 div 元素，我添加了（“shape shape-default shape -完全的'）

标签： javascriptreactjs

解决方案

你已经在 React 之外改变了 DOM。相反，您应该在“Reactland”中控制您的类名。实现此目的的一种方法是将映射或某些数据结构保持在应用类名的“已选择”或“单击”元素的状态（类似于选中的复选框）。

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classNames = ['shape shape-default'];
    if (this.state.checked[id] classNames.push('shape-complete');

    return (
      <li key={id} className="birds-list__item">
        <div className={classNames.join(' ')}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...

使用classnamesnpm 包可以稍微简化一下

import classNames from 'classnames';
...

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classnames = classNames(
      'shape',
      'shape-default',
      {
        'shape-complete': this.state.checked[id],
      },
    );

    return (
      <li key={id} className="birds-list__item">
        <div className={classnames}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...

推荐阅读