OnClick запускается несколько раз в React.js - PullRequest
Новая
       21

OnClick запускается несколько раз в React.js

0 голосов
/ 22 ноября 2018

У меня есть следующий компонент.

import React from 'react'
import Profile from './Profile'

import Messages from './Messages'
class ContactContent extends React.Component {
  constructor () {
    super()
    this.state = {
      message: ''
    }
    this.handleOnClick = (e) => {
      e.preventDefault()
      console.log('send message called')
    //   this.props.onSendMessage(this.state.message)
    }
  }

  render () {
    const { id, name, profile, messages } = this.props.user
    return (
      <div className='content'>
        <Profile
          name={id}
          profile={profile}
        />
        <Messages
          messages={messages}
        />
        <div className='message-input'>
          <div className='wrap'>
            <input type='text' placeholder='Write your message...' onChange={(e) => this.setState({ message: e.target.value })} />
            {/* <i className="fa fa-paperclip attachment" aria-hidden="true"></i> */}
            <button className='' onClick={this.handleOnClick}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
          </div>
        </div>
      </div>
    )
  }
}

export default ContactContent

при нажатии на кнопку вызывается onclick, которая запускает функцию handleonclick.но handleonclick называется бесконечным временем.это странное поведение, которое я видел в первый раз, хоть какая-то идея, что я сделал неправильно?

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Нет, вы вызываете handleOnClick каждый раз при загрузке страницы / рендеринге здесь. Итак, не делая этого, или чтобы избежать многократного вызова, попробуйте использовать:

толстая стрелкавызов этой функции для события onClick. 

<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
0 голосов
/ 22 ноября 2018

Исправлено: там был внешний файл javascript, который создавал эту проблему.Нет ничего плохого в коде.

...