ReactJS Button 没有调用 onClick 事件

Posted 2023-03-14

【中文标题】ReactJS Button 没有调用 onClick 事件

【英文标题】：ReactJS Button not calling the onClick event

【发布时间】：2019-11-07 17:07:13

【问题描述】：

所以我的问题是我的按钮 onClick 方法没有调用我的函数。

import React,  Component  from 'react';
import axios from 'axios';



export class FetchData extends  Component 
  static displayName = FetchData.name;

  constructor(props) 
    super(props);
    this.state =  users: [], loading: true ;
  

  componentDidMount() 
    this.getDataAxios();
  

  deleteItem()
    console.log("blabla");
    return this.state;
  

  editItem = () => 
    console.log("asdasd")
  


  static renderUsersTable(users) 
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Action</th> 
          </tr>
        </thead>
        <tbody>
        users.map(items => 
        <tr key=""> 
        <td>items.id</td>
        <td>items.name</td>
        <td>items.age</td> 
        <td>  
            <button type="button" onClick=this.deleteItem className="btn btn-danger">Delete</button>  
        </td>
        <td>  
            <button type="button" onClick=this.editItem className="btn btn-success">Edit</button>  
        </td>
         </tr> 

         ) 
        </tbody>
      </table>
    );
  

  render() 
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : FetchData.renderUsersTable(this.state.users);

    return (
      <div>
        <h1 id="tabelLabel" >API info</h1>
        <p>This component demonstrates fetching data from the api.</p>
        contents
      </div>
    );
  

  async getDataAxios()
    const response = await axios.get("https://localhost:5001/inventory");
    const data = await response.data;
    this.setState( users: data, loading: false );
    console.log(data);
   catch(err) 
      console.log(err)
 

是不是我的构造函数有问题？

即使单击时也不会调用编辑或删除按钮，我的控制台根本不会记录任何内容，也不会返回状态。

附：由于当前的 DATABASE，某些属性名称并非 100% 正确。

【问题讨论】：

您确定您的编译器支持该语法吗？你不能总是在像deleteItem = () => 这样的 React 类中定义函数。尝试以正常方式定义函数。

@TKoL 是的，它确实如此，我在我的其他 React 组件中具有相同的功能，它工作正常。

你好，卡尔。该代码看起来很可靠！应该管用。你能提供其余的组件吗？

我同意这个请求。

当您在按钮单击事件中 console.log e.target 时会发生什么？

【参考方案1】：

找到了解决办法。

改变

FetchData.renderUsersTable

到

this.renderUsersTable 

并从renderUsersTable 方法中删除static。并且不要忘记在构造函数中添加绑定：

this.deleteItem = this.deleteItem.bind(this);

【讨论】：

感谢您的努力！

【参考方案2】：

改变

deleteItem = () => 

到：

deleteItem() 

并在构造函数中添加thisbind：

this.deleteItem = this.deleteItem.bind(this);

【讨论】：

它没有帮助。

您的课程是否扩展了Component？ （如果你不使用钩子）