Как я могу изменить то, что отображается с помощью события click в React

Вы можете добавить состояние к этому компоненту, которое является логическим значением, которое переключает себя

class Card extends Component {
  constructor(props) {
    this.state = {
    showFront: true
  }
}...

И затем использовать ваш метод handleClick для переключения состояния назад и вперед

handleClick = (e) => {
  this.setState({showFront: !this.state.showFront})
}

И в вашей функции рендеринга вы можете добавить условное отображение

render() {
  return (
    <div className="Card" onClick={this.handleClick}>
      {
        this.state.showFront
          ? <h1>{this.props.front}</h1>
          : <h1>{this.props.back}</h1>
      }
    </div>
  );
}

Комментарий к этому ответу был сделан, но удален - я думаю, что этот вопрос стоит затронуть.

В комментарии сказано, что вы должны использовать setState(updater()) и не передавать объект. Это правда, что когда приложение становится более сложным, у вас есть несколько обновлений состояния вместе, и состояния данных могут не соответствовать вашим ожиданиям, функция updater является подходящей (setState является асинхронной и может выполнять пакетные вызовы, поэтому мы имеем функция, которая сбрасывает все и помогает нам поддерживать целостность состояний, сравнивая старые состояния с новыми.

, но для этого ответа и сложности вопроса обновление не требуется, и код должен работать просто отлично (и это доходит до точки использования состояния и переключения, что является правильным способом выполнения того, что было задано).

вы можете использовать функцию обновления в любое время, даже когда вам угодно - даже для самого простого изменения состояния. И, как сказано здесь , может быть, лучше всего всегда использовать его :)

для дополнительной информации React.Compoment setState & amp; Функция обновления

В реакции вы запускаете рендеринг, изменяя состояние компонента. Если этому компоненту необходимо получить реквизиты "front" и "back", тогда родительский компонент должен был сохранить в состоянии, если состояние "front" или "back", и передать функцию обратного вызова компонента для обработки изменений. Что-то вроде:

import React, { Component } from 'react';


class ParentCard extends Component {
  state = { isFront: true };

  handleClick = event => {
     this.setState({isFront: !this.state.isFront})
  }

 render = () => {

    const { front } = this.state;    


    return (
        <Card front={front} onClick={this.handleClick} />
    );
 };

export default ParentCard;

Также вы можете сделать Card компонент «чистым», просто создав его как функцию, которая возвращает JSX.

import React from 'react';


const Card = ( { isFront, onClick } ) => {

     return (

        <div className="Card" onClick={onClick}>

          <h1>{isFront ? `text if is front` : `text if it is not`}</h1>
        </div>

    );
  }
}

export default Card;

Надеюсь, это поможет:)

Сам этот компонент в настоящее время не настроен как функциональный компонент без сохранения состояния, так что если это то, чего вы также хотели достичь. Вы захотите внести эти изменения, а также передать логическое значение в ваш компонент с состоянием.

import React from 'react';

const Card = (props) => {

return (

  <div className="Card" onClick={props.handleClick}>

     {props.showFront 
     ?
     <h1>props.front</h1>
     :
     <h1>props.back</h1>
     }

   </div>

    );
  }

export default Card;

вы захотите использовать предыдущее состояние, чтобы переключать ваше состояние, потому что это может вызвать проблемы позже в процессе пакетирования, поэтому ваш компонент с состоянием должен выглядеть примерно так:

import React, {Component} from "React";

class StatefulCard extends Component {
  state = {
    showFront: true // default state to front
  }

  handleClick = () => {
   this.setState(prevState => {
    return {
     showFront: !prevState.showFront
    }
  }
}


  render() {
    return (
      <div>
        <Card 
         handleClick={this.handleClick}
         showFront={this.state.showFront}
/>
      </div>
    );
  }
}

export default Card;

Я бы сказал, что в этом случае вы хотите использовать state, а не props, особенно когда состояние, которое вы хотите изменить, определяется самим компонентом.

class Card extends Component {
  state = {
    mode: 'front' // default state to front
  }

  handleClick = () => this.setState({ mode: 'back' })

  render() {
    return (
      <div className="Card" onClick={this.handleClick}>
        <h1>{this.props.mode}</h1>
      </div>
    );
  }
}

export default Card;

Если это действительно переключение, то, конечно, вы можете использовать вместо этого логический флаг, но вы поняли идею.