Question

我正在使用映射数组，在单击元素时将“活动”类分配给元素（将activeIndex设置为元素的索引）。

但是，如果元素的索引在单击时已经是activeIndex的值，我想删除“活动”类。目前，当我第二次单击同一元素时，不会删除“活动”类。

class People extends Component {
    state = {
        people: [],
        activeIndex: null,
    };

    personClickHandler = (index) => {
        this.setState({activeIndex: index})
    };

    render() {
        let people = this.state.people.map((person, index) => {
            return (
                <Person
                    name={person.name}
                    cat={person.cat}
                    key={index}
                    index={index}
                    active={this.state.activeIndex}
                    clicked={() => this.personClickHandler(index)} />
            );
        });

        return (
            <div className={classes.People}>
                {people}
            </div>
        );
    }
}

我尝试过的事情：

我知道我需要进行某种状态比较。我最初的想法是将click事件处理程序中的activeIndex和prevState.activeIndex的当前值进行比较，但是我仍然遇到相同的问题，该类从未被删除如果第二次单击该元素。

personClickHandler = (index) => {
    this.setState(prevState => ({
        activeIndex: (prevState.index !== index) ? index : null,
    }));

    this.setState({activeIndex: index})
};

什么是最好的方法？

Answer 1

首先，您需要一种方法来动态确定地图中的当前Person是否为活动的Person。为此，只需将let a, i = 0, l, p, r, x = /\\?<\/?(?:[1-9]|[1-4]\d|5[0-7])>/g, T = '<1>This is a <21>test<21> of \\<22>escaped and \\> </ unescaped tags.<5>'; console.log('start'); a = T.split(/((?:[^<\\]+|\\+.?|<(?!\/?(?:[1-9]|[1-4]\d|5[0-7])>))+|<\/?(?:[1-9]|[1-4]\d|5[0-7])>)/).filter(Boolean); console.log(a); a=[]; while ( ( r = x.exec( T ) ) !== null) { if ( r[0].charAt(0) !== '\\' ) { if ( r.index === 0 || r.index === p ) { a[ i ] = r[0]; i = i + 1; } else { a[ i ] = T.substring( p, r.index ); a[ i + 1 ] = r[0]; i = i + 2; }; // end if p = x.lastIndex; }; // end if }; // next while if ( p !== T.length ) a[i] = T.substring( p ); console.log(a)的值等同于当前映射this.state.activeIndex与index。

如果执行此操作，则单击功能的this.state.activeIndex === index中将不需要任何特殊逻辑。只需将其与第一个代码示例中的内容完全一样即可。

现在每个人都将知道它是否处于活动状态，您可以使用short-circuit逻辑将setState类添加到带有active的单击的Person中。

className={active && 'active'}

// People.jsx
personClickHandler = (index) => {
  this.setState({ activeIndex: index }) // No need to involve previous state
}

render() {
  let people = this.state.people.map((person, index) => {
    return (
      <Person
        name={person.name}
        key={index}
        active={index === this.state.activeIndex} // Pass boolean for each Person
        clicked={() => this.personClickHandler(index)} />
    )
  })
  ...
}

这是这段代码的live demo。

如果被单击的元素已经“活动”，如何删除CSS“活动”类？

1 个答案: