метод onClick не вызывается, Reactjs, Typescript - PullRequest
Новая
       21

метод onClick не вызывается, Reactjs, Typescript

0 голосов
/ 19 июня 2020

addItem() метод, который привязан к onClick событию кнопки, не вызывается 

import React, { Component } from 'react';

class AddItem extends Component{ 

     constructor(props:any){
            super(props);
            this.addItem = this.addItem.bind(this);
        }

        addItem(){
            console.log("This is not working");
        }

        render(){
            return (
                <form>
                    ...
                    ...
                    ...
                    <button onClick = {this.addItem}>Add</button>
                </form>
            )
        }
}

Ответы [ 5 ]

2 голосов
/ 19 июня 2020

Вам нужно предотвратить событие формы по умолчанию

Песочница 

addItem(event) {
  event.preventDefault();
  console.log("This is not working");
}
0 голосов
/ 19 июня 2020

Спасибо за вдохновение { ссылка }
(Автор: @NikitaMadeev)

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

MouseEvent используется интерфейс и вызывается метод preventDefault(), тогда проблема решается ..

Спасибо всем, кто старается решить проблему. 

import React, { Component, MouseEvent } from 'react';

class AddItem extends Component{ 
    ...
    ...
    ...
    addItem(event:MouseEvent) {
        event.preventDefault();
        console.log("After preventDefault, this function is started working");
    }

    render(){
        return (
            <form>
                ...
                ...
                ...
                <button onClick = {this.addItem}>Add</button>
            </form>
        )
    }
}
0 голосов
/ 19 июня 2020

Работает нормально 

class AddItem extends React.Component {

  constructor(props) {
    super(props);
    this.addItem = this.addItem.bind(this);
  }

  addItem(e) {
    e.preventDefault()
    console.log("This is not working");
  }

  render() {
    console.log("This is working")
    return (
      <form onSubmit={this.addItem}>
      <button type="submit">Add</button>
      </form>
    )
  }
}

ReactDOM.render( < AddItem / > , document.getElementById('root'));
<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>
0 голосов
/ 19 июня 2020

Пробовал на CodePen, вам нужно удалить оператор «publi c», в этом случае он бесполезен, и из-за этого ваш код не работает

0 голосов
/ 19 июня 2020

Вот как вы можете это сделать. 

{console.log("Reset Button", value)}

подробнее описание

...