对除选定元素以外的所有元素的更改状态作出反应。

Question

我有一堆按钮，以改变样式的事件，如悬停，点击等。

我想用onClick事件做一个简单的操作来突出显示按下的按钮。

它做得很好，但是其他按钮需要去掉突出显示它们的类('light-active'和'sect-active')。这些类不会消失，因为状态isActive是真的，因为之前按下了按钮。

我想不出解决办法。下面是我的代码：(请注意，我将按钮称为“页面”)

App.js -根

import React, { Component } from 'react';
import PageButtons from './components/PageButtons';
import { v4 as uuidv4 } from 'uuid';
import PageBody from './components/PageBody';

class App extends Component {
  state = {
    pages: [
      {
        id: uuidv4(),
        title: 'Body',
        active: false,
      },
      {
        id: uuidv4(),
        title: 'Parents',
        active: false,
      },
      {
        id: uuidv4(),
        title: 'Head',
        active: false,
      },
      {
        id: uuidv4(),
        title: 'Face',
        active: false,
      },
      {
        id: uuidv4(),
        title: 'Hair',
        active: false,
      },
      {
        id: uuidv4(),
        title: 'Accessories',
        active: false,
      },
    ],
  };

  render() {
    return (
      <div className='App'>
        <div id='container' style={cont}>
          <PageButtons pages={this.state.pages} />
          <PageBody />
        </div>
      </div>
    );
  }
}

const cont = {
  padding: '1em',
  width: '40vw',
  display: 'grid',
  placeContent: 'center',
};

export default App;

PageButtons.js -按钮的父组件

import React, { Component } from 'react';
import PageButton from './PageButton';
import PropTypes from 'prop-types';

class PageButtons extends Component {
  render() {
    return (
      <div style={pagesStyle}>
        {this.props.pages.map((page) => (
          <PageButton
            key={page.id}
            page={page}
          />
        ))}
      </div>
    );
  }
}

const pagesStyle = {
  alignSelf: 'end',
  display: 'flex',
  flexWrap: 'nowrap',
  overflowX: 'auto',
  overflowY: 'hidden',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: '30vw',
  marginBottom: '1vw',
  cursor: 'pointer',
  padding: '1.3vw',
};

// PropTypes
PageButtons.propTypes = {
  pages: PropTypes.array.isRequired,
};

export default PageButtons;

PageButton.js -按钮

import React, { Component } from 'react';

class PageButton extends Component {
  state = {
    isHovered: false,
    isActive: false,
  };

  handleHover = () => {
    this.setState({ isHovered: !this.state.isHovered });
  };

  handleMouseDown = () => {
    this.setState({ isActive: !this.state.isActive });
  };
  

  render() {
    const isHovered = this.state.isHovered;
    const isActive = this.state.isActive;
    const { id, title } = this.props.page;
    return (
      <div
        id='singlePageBtnStyle'
        className='page'
        onMouseEnter={this.handleHover}
        onMouseLeave={this.handleHover}
        onMouseDown={this.handleMouseDown}
      >
        <div
          className={`light ${
            isHovered ? 'light-2' : [isActive ? 'light-active' : 'light']
          }`}
        ></div>
        <div
          className={`sect ${
            isHovered ? 'sect-2' : [isActive ? 'sect-active' : 'sect']
          }`}
        >
          <p
            dataText={title}
            style={{ margin: 'auto' }}
            className={`${isHovered ? 'glitch' : ''}`}
          >
            {title}
          </p>
        </div>
      </div>
    );
  }
}

export default PageButton;

Answer 1

由于您只希望一个按钮在某个时间处于活动状态，因此使用一个单独的状态片段来保存一个活动id/index/etc更有意义.(另一种方法是浅层复制整个pages数组，只需切换false所有active属性和1个真正的active属性)

从active状态中移除App属性。这里的状态应该只是驱动菜单项的内容。

state = {
  pages: [
    {
      id: uuidv4(),
      title: 'Body',
    },
    {
      id: uuidv4(),
      title: 'Parents',
    },
    ...
    {
      id: uuidv4(),
      title: 'Accessories',
    },
  ],
};

让PageButtons保持活动页面/按钮状态。创建一个切换处理程序，并将其作为onClick处理程序传递给PageButton以及计算的isActive支柱。

class PageButtons extends Component {
  state = {
    activeId: null,
  }

  // NOTE: Curried function to consume id and return onClick handler function
  toggleActive = id => e => this.setState(({ activeId }) => ({
    activeId: activeId === id ? null : id, // toggle same id off, or set new
  }));

  render() {
    const { activeId } = this.state;
    return (
      <div style={pagesStyle}>
        {this.props.pages.map((page) => (
          <PageButton
            isActive={activeId === page.id} // <-- compute if active
            onMouseOver={this.handleClick}
            onClick={this.toggleActive(page.id)} // <-- enclose id in callback
            key={page.id}
            page={page}
          />
        ))}
      </div>
    );
  }
}

页面按钮应该使用这些新的道具。在有意义的地方添加onClick处理程序，并通过isActive支柱设置活动类名。

class PageButton extends Component {
  state = {
    isHovered: false,
  };

  handleHover = () => {
    this.setState(({ isHovered }) => ({ isHovered: !isHovered }));
  };

  render() {
    const { isHovered } = this.state;
    const { isActive, onClick, page: { id, title } } = this.props;

    return (
      <div
        id='singlePageBtnStyle'
        className='page'
        onMouseEnter={this.handleHover}
        onMouseLeave={this.handleHover}
        onClick={onClick} // <-- attach onClick handler
      >
        <div
          className={`light ${
            isHovered ? 'light-2' : [isActive ? 'light-active' : 'light']
          }`}
        ></div>
        <div
          className={`sect ${
            isHovered ? 'sect-2' : [isActive ? 'sect-active' : 'sect']
          }`}
        >
          <p
            dataText={title}
            style={{ margin: 'auto' }}
            className={`${isHovered ? 'glitch' : ''}`}
          >
            {title}
          </p>
        </div>
      </div>
    );
  }
}