如何更改列表元素的类名

debugcn 发表于 Dev

特里格森

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

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元素， -完成'）

德鲁·里斯（Drew Reese）

您已经在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>
    )
  })
  ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。