在使用React
的简单ES6
应用中,我有一个counter
,当{{1} integer
时,0
的值最初更新为button
单击。当我bind(this)
到function
到addOne()
时,应用就可以了。但是,当我将(this)绑定到构造函数中的所有三个按钮时,由于此错误,应用程序无法加载,
未捕获的TypeError:无法读取属性 '__reactInternalInstance $ ggcqbwtkkb'为null
我已经读过如果我在render方法中绑定它将在每次页面呈现时创建该函数。我想避免这种情况。
问题
为什么当bind(this)
onClick
method
constructor
应用加载正常且一个按钮可以为clicked
时,为什么当我{ {1}}其他两个bind(this)
应用程序会抛出前面提到的错误吗?
构造函数在这样的情况下工作,
buttons
但是当我添加其他两个绑定时,它不起作用,
constructor(props) {
super(props);
this.state = {
count: 0
}
this.addOne = this.addOne.bind(this);
}
代码示例
constructor(props) {
super(props);
this.state = {
count: 0
}
this.addOne = this.addOne.bind(this);
this.addTwo = this.addTwo.bind(this);
this.addTen = this.addTen.bind(this);
}
视觉示例
答案 0 :(得分:1)
你有一个错字
addTwo()
不存在您只有addFive(), addTen() and addOne()
请参阅下面提供的固定代码
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
this.addOne = this.addOne.bind(this);
this.addFive = this.addFive.bind(this);
this.addTen = this.addTen.bind(this);
}
addOne() {
this.setState({
count: this.state.count + 1
})
}
addFive() {
this.setState({
count: this.state.count + 5
})
}
addTen() {
this.setState({
count: this.state.count + 10
})
}
render() {
return (
<div className="App">
<div className="home-intro">
<h2>Welcome to Home Component</h2>
</div>
<div className="counter">
<h3>Count: {this.state.count}</h3>
</div>
<div className="btn-group">
<button onClick={this.addOne} className="btn blue-btn">Add 1</button>
<button onClick={this.addFive} className="btn green-btn">Add 5</button>
<button onClick={this.addTen} className="btn red-btn">Add 10</button>
</div>
</div>
);
}
}
ReactDOM.render(<Home />, document.querySelector('#app'))
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
&#13;