Question

我正在尝试使用onClick事件处理程序来更改元素的类。单击div时，class会发生更改，从而导致某些css依次更改。当我添加另一个div时，它的状态与第一个div相同。

class Content extends React.Component {
    constructor(props) {
        super(props);
        this.startGambling = this.startGambling.bind(this);
        this.toggleClass = this.toggleClass.bind(this);
        this.state = {
            prize: '',
            tries: 0,
            isFlipped: false
        };
    }
    toggleClass() {
        this.setState({ isFlipped: true });
    };

    render() {
        return (
            <div className="card-box" style={divStyle}>
                <div class="flip-card-inner" className={this.state.isFlipped ? 'flipped' : null} onClick={this.toggleClass}></div>
            </div>
        );
    }
}

Answer 1

状态不是html-element-scoped。它是当前组件的状态。实现FlipCard组件并在该组件内处理其翻转状态。

class FlipCard extends React.Component {
  state = {
    isFlipped: false
  }
  
  toggle = () => {
    this.setState(prevState => ({
      isFlipped: !prevState.isFlipped
    }))

  }

  
  render(){
    const { isFlipped } = this.state;
    
    return (
      <div
        onClick={this.toggle}
        className={isFlipped ? 'flipped' : ''}>
        Card
      </div>
    )
  }
}

const CardBox = () => (
  <article>
    <FlipCard />
    <FlipCard />
  </article>
);

ReactDOM.render(<CardBox />, document.getElementById('root'))

div {
  cursor: pointer;
}

div.flipped {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

这是与@gazdagergo答案不同的方法，但是逻辑是相同的。您需要在某处跟踪切换状态。如果您在其他任何地方都不需要此切换状态，则可以将其保留在自己的组件中，如@gazdagergo所示。但是，例如，如果您需要知道切换了多少个项目（仅作为示例），则可以将状态保留在父组件中，以便与另一个组件共享此信息。

const cards = [
  { id: 1, name: "foo" },
  { id: 2, name: "bar" },
  { id: 3, name: "baz" }
];

const Card = ({ card, toggleClass, isFlipped }) => {
  const handleClick = () => toggleClass(card.id);
  return (
    <div onClick={handleClick} className={isFlipped[card.id] ? "flipped" : ""}>
      {card.name}
    </div>
  );
};

class Content extends React.Component {
  constructor(props) {
    super(props);
    this.toggleClass = this.toggleClass.bind(this);
    this.state = {
      prize: "",
      tries: 0,
      isFlipped: {}
    };
  }

  toggleClass(id) {
    this.setState(state => ({
      isFlipped: { ...state.isFlipped, [id]: !state.isFlipped[id] }
    }));
  }

  render() {
    return (
      <div>
        {cards.map(card => (
          <Card
            key={card.id}
            card={card}
            toggleClass={this.toggleClass}
            isFlipped={this.state.isFlipped}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Content />, document.getElementById("root"));

.flipped {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

在示例中，我假设卡片项目具有唯一的ID，但是您也可以使用索引来实现。您的isFlipped状态不再是布尔值，而是一个对象，并保留翻转的ID。

状态影响所有具有相同名称的元素

2 个答案: