onClick 方法未被调用，Reactjs，Typescript

Question

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>
            )
        }
}

Answer 1

这就是你可以做到的。

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

详情desctiption

Answer 2

您需要 prevent 默认表单事件

Sandbox

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

Answer 3

在 CodePen 上试过了，你必须删除 "public" 语句，在这种情况下它没有用，它会使你的代码无法运行

Answer 4

工作正常

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>

Answer 5

感谢
的启发 (作者 : @NikitaMadeev)

我只是需要根据打字稿在这个 link 中配置答案，因为我正在使用它。（下面的代码在一个名为 AddItem.tsx[=24 的文件中=])

使用
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> ) } }

onClick 方法未被调用，Reactjs，Typescript

onClick method is not invoked, Reactjs, Typescript

callback

onclick

typescript

reactjs