reactjs - React app not showing in Codepen no matter what?
问题描述
I have a react app that I made in VS Studio, putting it into codepen, it doesnt seem to load a thing, any suggestions?
I have tried making sure React is linked and checked all of my syntax, no errors on local host but no display in codepen.
I have looked through the code multiple times and I feel its such a silly mistake
https://codepen.io/donnieberry97/pen/EzmOvW
class TodoListt extends React.Component {
state = {};
constructor(props) {
super(props);
this.state = {
userInput: "",
list: [],
editing: false,
};
}
changeUserInput(input) {
this.setState({
userInput: input
})
}
addToList() {
if (this.state.userInput === "") { (alert("Please enter a To-do")); return; };
const { list, userInput } = this.state;
this.setState({
list: [...list, {
text: userInput, key: Date.now(), done: false
}],
userInput: ''
})
}
handleChecked(e, index) {
console.log(e.target.checked);
const list = [...this.state.list];
list[index] = { ...list[index] };
list[index].done = e.target.checked;
this.setState({
list
})
}
handleEditing(e) {
this.setState({
editing: true
})
}
handleRemoved(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list
})
}
render() {
var viewStyle = {};
var editStyle = {};
if (this.state.editing) {
viewStyle.display = "none"
}
else {
editStyle.display = "none"
}
return (
<div className="to-do-list-main">
<input
onChange={(e) => this.changeUserInput(e.target.value)}
value={this.state.userInput}
type="text"
/>
<div class="submitButton">
<button onClick={() => { this.addToList(this.state.userInput) }}>Add todo</button>
</div>
{this.state.list.map((list, index) => (
<div className="form">
<ul>
{/* <div style={viewStyle} onDoubleClick={this.handleEditing.bind(t his)}> */}
<li key={list.key}>
<div class="liFlexCheck">
<input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
</div>
<div class="liFlexText">
<div class="liFlexTextContainer">
<span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
{list.text}
</span>
</div>
</div>
<button onClick={(index) => this.handleRemoved(index)}>Remove</button>
<input
type="text"
style={editStyle}
value={list.text}
/>
</li>
{/* </div> */}
</ul>
</div>
))}
</div>
);
}
}
解决方案
删除import
语句,工作示例。
import
当你有External Scripts时,你不应该使用。
此外,您的代码中有许多错误需要处理,例如:
<div class="submitButton">
, 使用className
.- 列表中的每个孩子都应该有一个唯一的
key
道具。 value
带有道具但没有处理程序的表单字段onChange
。
查看日志:
推荐阅读
- php - 如何将数据保存在 PHP 文件中的变量中并将其作为响应返回(返回到 ajax 调用)?
- reactjs - 如何在谷歌地图 api / React.js 中“使用组件作为图标”
- python - 删除熊猫中的“相似”行
- python - Pandas - 如何根据其他列中的条件对列中的句子求和,并将结果文档存储在列表中
- ios - UITextField 绑定时弹跳的文本正在更改
- reactjs - React 的代码优化(forEach 或简单的 for)
- c++ - stringstream 中的自定义字符串输入
- java - 如何将最大队列大小导出到 Excel?
- python - 在 Keras 中定义新的 Lambda 层时重塑错误
- mongodb - 如何修复 AdapterError:来自数据库适配器的意外错误:对象 [{"_bsontype":"ObjectID","id":null}]