Добавление события клика в React.Js

Вы должны использовать bind

onClick = {this.handleClick.bind(this)}

или используйте функцию стрелки

onClick = {()=>this.handleClick()}

Вам нужно объявить метод обработчика после метода рендеринга. Вот базовая реализация вашего кода в jsfiddle.

https://jsfiddle.net/ufyxwv8p/

class Individual extends React.Component {
    render() {
        const indDiv = {
            margin: '5px',
            width: '100px',
            height: '120px',
            cursor: 'pointer',
            border: '5px solid pink',
            color: 'blue',
            float: 'left'
        };

        return (
            <div>
                <div onClick = {this.handleClick}>
                    Click to show in console
                </div>
                <div style = {indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
    handleClick = () => {
        console.info('this is:', this);
    }
}

ReactDOM.render(<Individual/>,document.getElementById("app"))

Обработчик кликов на Alert 1 уже работает. При использовании синтаксиса свойств класса bind нет необходимости в () => {}.

Ваш обработчик кликов на Alert 2 не работает, потому что вы написали встроенную стрелочную функцию, которая возвращает другую функцию. Называть его нужно, например, () => this.handleClick().

Вот рабочий фрагмент вашего кода.

class Individual extends React.Component {
  handleClick = () => {
    alert("GREAT");
  };
  render() {
    const indDiv = {
      margin: "5px",
      width: "100px",
      height: "120px",
      cursor: "pointer",
      border: "5px solid pink",
      color: "blue",
      float: "left"
    };

    return (
      <div>
        <div onClick = {this.handleClick}>Alert 1</div>
        <div onClick = {() => this.handleClick()}>Alert 2</div>
        <div style = {indDiv}>
          {this.props.num}. {this.props.name}.
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Individual />, document.getElementById("app"));

<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 = "app"></div>

Оба способа вызова функции-обработчика неверны в вашем коде.

В вашем коде handleClick - это стрелочная функция, поэтому ручная привязка не требуется.

Если это не стрелочная функция, ручная привязка всегда должна выполняться только в конструкторе. Никогда не выполняйте привязку где-либо еще, как это было при рендере.

Когда вы используете onClick = {() => this.handleClick}, это неправильно. Это должно быть onClick = {() => this.handleClick ()}. Если нет Paranthesis, то это правильно onClick = {this.handleClick}

Так что измени

    <div onClick = {this.handleClick.bind(this)}>
                Alert 1
            </div>
            <div onClick = {() => this.handleClick}>
                Alert 2
            </div>

К

    <div onClick = {()=> this.handleClick()}>
                Alert 1
            </div>
            <div onClick = {() => this.handleClick()}>
                Alert 2
            </div>

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

вот попробуйте вот так, как вы определяете свою функцию handleclick, неправильно, я отредактировал ваш код онлайн в песочнице, чтобы он работал. вызовите функцию так, как вы вызываете Alert 1, чем определите функцию так, как я загрузил изображение

Ссылка на коды и ящик вашего кода проверьте, что

Проверьте это изображение этого кода, если у вас нет времени просмотреть весь код.

class Individual extends React.Component {
  handleClick = () => {
    alert("GREAT");
  };
  render() {
    const indDiv = {
      margin: "5px",
      width: "100px",
      height: "120px",
      cursor: "pointer",
      border: "5px solid pink",
      color: "blue",
      float: "left"
    };

    return (
      <div>
        <div onClick = {this.handleClick}>Alert 1</div>
        <div onClick = {this.handleClick}>Alert 2</div>
        <div style = {indDiv}>
          {this.props.num}. {this.props.name}.
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Individual />, document.getElementById("app"));