gpt4 book ai didi

javascript - 为什么我的 JavaScript 程序中的状态为空?

转载 作者:行者123 更新时间:2023-11-29 21:00:22 25 4
gpt4 key购买 nike

我尝试执行以下应用程序,但收到错误消息“Uncaught TypeError: Cannot read property 'checked' of null”。为什么我得到一个空状态?为什么我无法阅读选中的内容?

if 语句中的 Checkbox.js 中接收错误,即

if (this.state.checked) {

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="react-container"></div>
</body>
</html>

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Checkbox from './Checkbox';

ReactDOM.render(<Checkbox />, document.getElementById('react-container'));

复选框.js

import React, { Component } from 'react';

class Checkbox extends Component {
getInitialState(){
return {checked: false}
}
handleCheck(){
this.setState({checked: !this.state.checked})
}
render() {
var message
if (this.state.checked) {
message = "Checked"
} else {
message = "Unchecked"
}
return (
<div>
<label><input type = "checkbox" onChange = {this.handleCheck}></input></label>
<p>This box is {message}</p>
</div>
);
}
}

export default Checkbox;

最佳答案

如果你使用最新版本的 React 和 ES6。 “getInitialState”已弃用。

相反。

class Checkbox extends Component{
state = {
checked: false,
}
}

还使用 PureComponent 而不是 Component 作为 Component 进行深度对象重新协调检查。

关于javascript - 为什么我的 JavaScript 程序中的状态为空?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46784867/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com