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

Question

Я изучаю React.Js. Я пытаюсь прикрепить событие, чтобы записать что-то в консоли, однако я не могу заставить свою функцию срабатывать. Кто-нибудь знает, как я могу прикрепить событие onClick к реагировать div? Я прошу прощения, если это основной вопрос, но я пробовал несколько разных методов, и ни один из них не работает.

Я пробовал два способа запуска функции, показанной ниже, но ни один из них не работает.

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

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.bind(this)}>
                    Alert 1
                </div>
                <div onClick={() => this.handleClick}>
                    Alert 2
                </div>
                <div style={indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
}

Спасибо всем, кто способствовал этому. После всего, что я обнаружил, потому что я изначально создал это как серверную часть, я должен был прикрепить события после отображения страницы. Я использовал ReactJS.Net и должен был инициализировать его отдельно, используя гидрат.

Answer 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"));

Answer 2

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

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

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

Answer 3

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

В вашем коде 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>

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

Answer 4

Обработчик кликов на 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>

Answer 5

Вам необходимо объявить метод обработчика после метода рендеринга. Вот базовая реализация вашего кода в 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.log('this is:', this);
    }
}

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

Answer 6

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

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

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

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