React中的onClick不工作
React中的onClick不工作
提问于 2018-06-03 01:59:15
我知道这个问题已经被问了很多次了。我看过很多解决方案，我几乎可以肯定我有正确的语法。然而，由于onClick事件，我的console.log没有出现在我期望执行的函数中。我是不是漏掉了什么非常简单的东西？谢谢!
import React, { Component } from 'react';
import Header from './Header';
import AddButton from './AddButton';
import CardContainer from './CardContainer';
import style from '../style/App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
cardTitles: ['first', 'second', 'third']
};
this.addCard = this.addCard.bind(this);
}
addCard(event) {
event.preventDefault();
console.log('ADDED')
this.state.cardTitles.push('new');
this.setState({
cardTitles: this.state.cardTitles
})
}
render() {
return (
<div className={style.appContainer}>
<Header/>
<AddButton onClick={this.addCard}/>
<CardContainer cardTitles={this.state.cardTitles}/>
</div>
);
}
}
export default App;以下是服务器代码：
var express = require('express');
var bodyParser = require('body-parser');
var request = require('request');
var app = express();
app.use(express.static(__dirname + '/../builds'));
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(3000, function() {
console.log('listening on port 3000!');
});下面是AddButton组件：
import React from 'react';
import style from '../style/AddButton.css';
const AddButton = () => {
return (
<div className={style.addButtonContainer}>
+ Add Note
</div>
);
};
export default AddButton;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 02:18:15
确保您正在调用作为道具传递给AddButton组件的onClick函数，否则它将不会被触发。
您需要将以下代码放在AddButton中的某个位置
this.props.onClick();因此，假设AddButton有一个底层的<button>元素，您在AddButton中的呈现将如下所示。
render() {
return <button onClick={this.props.onClick}>Add</button>
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659692
复制相关文章
相似问题