ReactJS

Question

尝试在 ReactJS 中做一个简单的 onClick event/function。

单击按钮时，我想运行一个名为 "onClick" 的函数，但我在控制台中收到此错误：

app.js:62 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

已用谷歌搜索，但不确定我哪里出了问题。我查看了 ReactJs 文档，这看起来是正确的，但显然不是。这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import axios from 'axios';

import Navbar from './components/Navbar';
import Header from './components/Header';
import GiphyButton from './components/GiphyButton';
import './assets/sass/main.scss';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      giphy: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    console.log('giffy button clicked');
    axios.get('http://api.giphy.com/v1/gifs/search?q=otters&api_key=<API KEY>')

      .then(res => {
        this.setState({ giphy: res.data });
        console.log(res.data);
      });
  }

  render() {
    return (
      <BrowserRouter>
        <main>
          <Navbar />
          <Header />
          <GiphyButton onClick={this.handleClick()}/>
        </main>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

GiphyButton 是一个组件，从字面上看，它只是一个 .这里没有其他功能运行ning:

从 'react' 导入 React；

const GiphyButton = () => (

  <section>
    <button>See more otters</button>
  </section>
);

export default GiphyButton;

谢谢。

Answer 1

你应该只传递函数 -handleClick 而不是调用它

render() {
    return (
      <BrowserRouter>
        <main>
          <Navbar />
          <Header />
          <GiphyButton handleClick={this.handleClick}/>
        </main>
      </BrowserRouter>
    );
  }

阻止事件对象传递导致 undefined 错误。

使用以下方法更改 GiphyButton 的代码以传递 onclick 方法 -

import React from 'react';

const GiphyButton = (props) => (

  <section>
    <button onClick={props.handleClick}>See more otters</button>
  </section>
);

export default GiphyButton;

Answer 2

Vivek 的解决方案是正确的。似乎没有运行的原因可能是您缺少错误处理。检查 url（可能 api 键有问题？）并尝试捕获 axios 错误。看看这里：

code example

Answer 3

不是我问题的答案，但我最终将函数更改为 handleSubmit 并将其传递到我的按钮所在的表单中。这有效。

Answer 4

您应该将此事件绑定到 "handleClick()" 函数。如下，

<GiphyButton onClick={this.handleClick.bind(this)}/>

ReactJS - 无法读取未定义的属性 'preventDefault'

ReactJS - Cannot read property 'preventDefault' of undefined

javascript

function

onclick

preventdefault